@scania/tegel 0.0.1-beta.4 → 0.0.1-beta.6

package/dist/cjs/loader.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e1c79686.js');
 
 /*
- Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.19.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();

package/dist/cjs/tegel.cjs.js

@@ -3,7 +3,7 @@
 const index = require('./index-e1c79686.js');
 
 /*
- Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.19.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('tegel.cjs.js', document.baseURI).href));

package/dist/collection/collection-manifest.json

@@ -32,8 +32,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "2.19.2",
+    "typescriptVersion": "4.7.4"
   },
   "collections": [],
   "bundles": []

package/dist/components/dropdown-option.js

@@ -96,6 +96,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { DropdownOption as D, defineCustomElement as d };

package/dist/components/dropdown.js

@@ -292,6 +292,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { Dropdown as D, defineCustomElement as d };

package/dist/components/icon.js

@@ -54,6 +54,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { Icon as I, defineCustomElement as d };

package/dist/components/sdds-accordion-item.js

@@ -53,7 +53,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsAccordionItem = AccordionItem;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-accordion.js

@@ -31,7 +31,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsAccordion = Accordion;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-badges.js

@@ -69,7 +69,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsBadges = SddsBadges$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-button.js

@@ -51,7 +51,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsButton = SddsButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-datetime.js

@@ -83,7 +83,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsDatetime = Datetime;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-dropdown-filter.js

@@ -131,7 +131,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsDropdownFilter = DropdownFilter;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-header-cell.js

@@ -166,7 +166,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsHeaderCell = TableHeaderCell;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-inline-tabs-fullbleed.js

@@ -108,7 +108,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsInlineTabsFullbleed = InlineTabsFullbleed;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-inline-tabs.js

@@ -228,7 +228,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsInlineTabs = InlineTabs;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-modal.js

@@ -62,7 +62,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsModal = Modal;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-navigation-tabs.js

@@ -106,7 +106,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsNavigationTabs = NavigationTabs;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-popover-canvas.js

@@ -90,7 +90,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsPopoverCanvas = PopoverCanvas;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-popover-menu.js

@@ -89,7 +89,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsPopoverMenu = PopoverMenu;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-slider.js

@@ -359,7 +359,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsSlider = Slider;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-spinner.js

@@ -30,7 +30,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-table-body-row-expandable.js

@@ -97,7 +97,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTableBodyRowExpandable = TableBodyRowExpandable;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-table-body.js

@@ -330,7 +330,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTableBody = TableBody;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-table-footer.js

@@ -189,7 +189,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTableFooter = TableFooter;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-table-header.js

@@ -118,7 +118,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTableHeader = TableHeaderRow;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-table-toolbar.js

@@ -81,7 +81,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTableToolbar = TableToolbar;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-table.js

@@ -85,7 +85,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTable = Table;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-textarea.js

@@ -83,7 +83,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTextarea = Textarea;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-textfield.js

@@ -104,7 +104,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTextfield = Textfield;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-tooltip.js

@@ -109,7 +109,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsTooltip = Tooltip;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/table-body-cell.js

@@ -98,6 +98,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { TableBodyCell as T, defineCustomElement as d };

package/dist/components/table-body-row.js

@@ -115,6 +115,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { TableBodyRow as T, defineCustomElement as d };

package/dist/esm/loader.js

@@ -1,7 +1,7 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-b67b15a6.js';
 
 /*
- Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.19.2 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return promiseResolve();

package/dist/esm/tegel.js

@@ -1,7 +1,7 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-b67b15a6.js';
 
 /*
- Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.19.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.1-beta.4",
+  "version": "0.0.1-beta.6",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -13,7 +13,7 @@
     "url": "https://github.com/scania-digital-design-system/sdds/issues"
   },
   "main": "dist/index.cjs.js",
-  "module": "./dist/components/index.js",
+  "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.20.0",
+    "@stencil/core": "^2.13.0",
     "@storybook/addon-google-analytics": "^6.2.9",
     "concurrently": "^7.4.0",
     "dotenv": "^16.0.3",

package/readme.md

@@ -15,6 +15,141 @@ Check out [Tegel Design System](https://tegel.scania.com/) for implementation an
 
 - Installation: [https://tegel.scania.com/development/getting-started-development/installation](https://tegel.scania.com/development/getting-started-development/installation)
 
+## React
+
+### 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');
+```
+
+### 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).