@scania/tegel 0.0.61 → 0.0.72

package/{readme.md → README.md}

@@ -1,19 +1,31 @@
-<!-- TODO: add release -->
-<!-- [![Github release](https://img.shields.io/npm/v/@scania/components?color=1081C2)](https://www.npmjs.com/package/@scania/components)
-[![Github release](https://img.shields.io/github/v/release/scania-digital-design-system/sdds?color=1081C2)](https://github.com/scania-digital-design-system/sdds/releases) -->
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![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/sdds)
-[![Getting Started](https://img.shields.io/badge/Available%20components-tegel.scania.com-orange)](https://tegel.scania.com/getting-started/development)
+![Status: Beta](https://img.shields.io/badge/status-beta-red)
 
-# Tegel Design System - Components
+# Tegel Design System
 
-**Technical documentation**
+https://tegel.scania.com/
 
-Check out [Tegel Design System](https://tegel.scania.com/) for implementation and technical documentation.
+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](#status)
+- [Installation](#installation)
+  - [React with typescript](#with-typescript)
+  - [React with javascript](#with-javascript)
+  - [Angular](#angular)
+  - [HTML/JS](#html)
+- [Browser support](#browser-support)
+- [Code conventions](#code-conventions)
+- [Development environment](#setting-up-the-development-environment)
+- [Community](#community)
+
+## 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! It's available via NPM and can be installed using the installation guide below.
 
-[comment]: <> (Needs to be updated once a stable version is released.)
 ## Installation
+
 ### React
 
 #### with Typescript
@@ -21,30 +33,33 @@ Check out [Tegel Design System](https://tegel.scania.com/) for implementation an
 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 { }
-    }
+  [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)
+}
+
+defineCustomElements(window);
 ```
+
 4. In your index.tsx import `register-webcomponents.ts`
+
 ```tsx
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -53,44 +68,48 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import './register-webcomponents';
 
-const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
-);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </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'
+import { defineCustomElements } from '@scania/tegel/loader';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );
 
 reportWebVitals();
-defineCustomElements()
+defineCustomElements();
 ```
+
 3. In your global css file (usually `App.css`) import the tegel stylesheet.
+
 ```css
 @import url('@scania/tegel/dist/tegel/tegel.css');
 ```
@@ -102,34 +121,34 @@ defineCustomElements()
 
 ```ts
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import  { defineCustomElements } from '@scania/tegel/loader'
+import { defineCustomElements } from '@scania/tegel/loader';
 import { AppModule } from './app/app.module';
 
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+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
-  ],
+  declarations: [AppComponent],
+  imports: [BrowserModule],
   providers: [],
-  bootstrap: [AppComponent], 
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class AppModule { }
+export class AppModule {}
 ```
+
 4. In your global css file (`styles.css`) import the tegel stylesheet.
+
 ```css
 @import url('@scania/tegel/dist/tegel/tegel.css');
 ```
@@ -139,32 +158,31 @@ export class AppModule { }
 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 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">
+<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).
 
 ## Events
 
-The tegel components emit custom events to allow the users to repond to changes/updates in the components. These are all named using the 
+The tegel components emit custom events to allow the users to repond to changes/updates in the components. These are all named using the
 sdds-prefix. This is done in order to not have conflicting events and to make it clear to the user the specified event is something that is emitted
 from a tegel component.
 
 The events are named according to our naming convention: 'sdds' + event.
 For a click event this would result in the event being called `sddsClick`. To listen for these events in vanilla JS the event name
 should be passed to the `addEventListener` function as the first argument:
+
 ```javascript
 document.addEventListener('sddsClick', (event) => {
   // Do something with/based on the event.
-})
+});
 ```
 
 In React these events needs to be listened to by adding an event listener to the element that emits the event. This can be easily done by
@@ -174,24 +192,26 @@ This solution is a workaround based on how React handles events, you can read mo
 
 ```jsx
 <sdds-textfield
-  ref={element => element.addEventListener('sddsClick', (event) => {
-    {/* Do something with/based on the event. */}
+  ref={(element) =>
+    element.addEventListener('sddsClick', (event) => {
+      {
+        /* Do something with/based on the event. */
+      }
     })
   }
-  >
-</sdds-textfield>
+></sdds-textfield>
 ```
 
 In other JSX-enviroments (apart from React) these events can be listened to by prefixing them with an `on` directly on the component:
+
 ```jsx
 <sdds-textfield
-  onSddsChange={(event) => {/* Do something with/based on the event. */}}
-  >
-
-</sdds-textfield>
+  onSddsChange={(event) => {
+    /* Do something with/based on the event. */
+  }}
+></sdds-textfield>
 ```
 
-
 What is attached to the event object is highlighted in our storybook. Under the docs tab of each component the events are outlined,
 inluding what data is passed with the event to the user.
 
@@ -206,28 +226,22 @@ but the user should not interact with it. E.g. `internalSddsPropsChange`.
 
 See the browser support section on [the Tegel website](https://tegel.scania.com/development/getting-started-development/introduction#browser-support).
 
-## Contributing
-
-Please read through our [contributing guidelines](https://github.com/scania-digital-design-system/sdds/blob/master/CONTRIBUTING.md) for the directions to **develop components**, **create a pull request** and **coding standard**.
-
-- [Report bug](https://github.com/scania-digital-design-system/sdds/issues)
-- [Request feature](https://github.com/scania-digital-design-system/sdds/issues/new)
-
-
 ## Code conventions
 
-The code conventions used in (and enforced by) Tegel is documented [here](https://github.com/scania-digital-design-system/sdds/blob/main/.github/CODE_STYLE.md).
+The code conventions used in (and enforced by) Tegel is documented [here](https://github.com/scania-digital-design-system/tegel/blob/main/.github/CODE_STYLE.md).
 
 ### Setting up the development environment
 
 1. Make sure you are using the required node.js version specified in `tegel/package.json` (node 16 at the time of writing).
-2. Run `npm install` in the /tegel directory.
+2. Run `npm install` in the root directory.
+3. Run `npm install` in the core directory.
 3. Create a `.env` file in the /tegel directory with the following contents:
 
-  ```
-  STORYBOOK_ENV=development
-  ```
-4. Make sure you are in the /tegel directory, and start the dev server with `npm run tegel`.
+```
+STORYBOOK_ENV=development
+```
+
+4. Make sure you are in the root directory, and start the dev server with `npm run storybook`.
 
 ## Community
 

package/dist/cjs/{index-681dc796.js → index-fd332a2b.js}

@@ -752,30 +752,31 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
  * @param vnodes a list of virtual DOM nodes to remove
  * @param startIdx the index at which to start removing nodes (inclusive)
  * @param endIdx the index at which to stop removing nodes (inclusive)
- * @param vnode a VNode
- * @param elm an element
  */
-const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
-    for (; startIdx <= endIdx; ++startIdx) {
-        if ((vnode = vnodes[startIdx])) {
-            elm = vnode.$elm$;
-            callNodeRefs(vnode);
-            {
-                // we're removing this element
-                // so it's possible we need to show slot fallback content now
-                checkSlotFallbackVisibility = true;
-                if (elm['s-ol']) {
-                    // remove the original location comment
-                    elm['s-ol'].remove();
-                }
-                else {
-                    // it's possible that child nodes of the node
-                    // that's being removed are slot nodes
-                    putBackInOriginalLocation(elm, true);
+const removeVnodes = (vnodes, startIdx, endIdx) => {
+    for (let index = startIdx; index <= endIdx; ++index) {
+        const vnode = vnodes[index];
+        if (vnode) {
+            const elm = vnode.$elm$;
+            nullifyVNodeRefs(vnode);
+            if (elm) {
+                {
+                    // we're removing this element
+                    // so it's possible we need to show slot fallback content now
+                    checkSlotFallbackVisibility = true;
+                    if (elm['s-ol']) {
+                        // remove the original location comment
+                        elm['s-ol'].remove();
+                    }
+                    else {
+                        // it's possible that child nodes of the node
+                        // that's being removed are slot nodes
+                        putBackInOriginalLocation(elm, true);
+                    }
                 }
+                // remove the vnode's element from the dom
+                elm.remove();
             }
-            // remove the vnode's element from the dom
-            elm.remove();
         }
     }
 };
@@ -1256,10 +1257,17 @@ const isNodeLocatedInSlot = (nodeToRelocate, slotNameAttr) => {
     }
     return slotNameAttr === '';
 };
-const callNodeRefs = (vNode) => {
+/**
+ * 'Nullify' any VDom `ref` callbacks on a VDom node or its children by
+ * calling them with `null`. This signals that the DOM element corresponding to
+ * the VDom node has been removed from the DOM.
+ *
+ * @param vNode a virtual DOM node
+ */
+const nullifyVNodeRefs = (vNode) => {
     {
         vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
-        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+        vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
     }
 };
 /**
@@ -1396,10 +1404,32 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
     const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
     return writeTask(dispatch) ;
 };
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
-    let promise;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
     if (isInitialLoad) {
         {
             hostRef.$flags$ |= 256 /* HOST_FLAGS.isListenReady */;
@@ -1409,17 +1439,38 @@ const dispatchHooks = (hostRef, isInitialLoad) => {
             }
         }
         {
-            promise = safeCall(instance, 'componentWillLoad');
+            // If `componentWillLoad` returns a `Promise` then we want to wait on
+            // whatever's going on in that `Promise` before we launch into
+            // rendering the component, doing other lifecycle stuff, etc. So
+            // in that case we assign the returned promise to the variable we
+            // declared above to hold a possible 'queueing' Promise
+            maybePromise = safeCall(instance, 'componentWillLoad');
         }
     }
     {
-        promise = then(promise, () => safeCall(instance, 'componentWillRender'));
+        maybePromise = enqueue(maybePromise, () => safeCall(instance, 'componentWillRender'));
     }
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => maybePromise instanceof Promise ? maybePromise.then(fn) : fn();
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -1548,9 +1599,6 @@ const safeCall = (instance, method, arg) => {
     }
     return undefined;
 };
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -1714,9 +1762,9 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
 const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
         {
-            // we haven't initialized this element yet
-            hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -1929,7 +1977,10 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                         // adding the shadow root build conditionals to minimize runtime
                         {
                             {
-                                self.attachShadow({ mode: 'open' });
+                                self.attachShadow({
+                                    mode: 'open',
+                                    delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),
+                                });
                             }
                         }
                     }
@@ -2106,10 +2157,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './sdds-card.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'sdds-checkbox.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './sdds-checkbox.cjs.entry.js')); }).then(processMod, consoleError);
         case 'sdds-chip.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2126,6 +2173,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './sdds-dropdown-filter.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'sdds-dropdown-option-v2.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './sdds-dropdown-option-v2.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'sdds-dropdown-v2.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './sdds-dropdown-v2.cjs.entry.js')); }).then(processMod, consoleError);
         case 'sdds-folder-tab.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2366,6 +2421,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './sdds-core-header-item_2.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'sdds-checkbox.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './sdds-checkbox.cjs.entry.js')); }).then(processMod, consoleError);
         case 'sdds-icon.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2458,5 +2517,3 @@ exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
-
-//# sourceMappingURL=index-681dc796.js.map

package/dist/cjs/index.cjs.js

@@ -1,4 +1,2 @@
 'use strict';
 
-
-//# sourceMappingURL=index.cjs.js.map