@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,2 @@
+export declare const formatHtmlPreview: (htmlStr: any) => string;
+export declare function demoFormat(first: string, middle: string, last: string): string;

package/loader/cdn.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -0,0 +1,3 @@
+
+module.exports = require('../dist/cjs/loader.cjs.js');
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -0,0 +1,12 @@
+export * from '../dist/types/components';
+export interface CustomElementsDefineOptions {
+  exclude?: string[];
+  resourcesUrl?: string;
+  syncQueue?: boolean;
+  jmp?: (c: Function) => any;
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
+export declare function applyPolyfills(): Promise<void>;

package/loader/index.es2017.js

@@ -0,0 +1,3 @@
+
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -0,0 +1,4 @@
+
+(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
+export * from '../dist/esm/polyfills/index.js';
+export * from '../dist/esm/loader.js';

package/loader/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "tegel-loader",
+  "private": true,
+  "typings": "./index.d.ts",
+  "module": "./index.js",
+  "main": "./index.cjs.js",
+  "jsnext:main": "./index.es2017.js",
+  "es2015": "./index.es2017.js",
+  "es2017": "./index.es2017.js",
+  "unpkg": "./cdn.js"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "0.0.1-beta.9",
+  "version": "0.0.2",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",

package/readme.md

@@ -152,6 +152,40 @@ export class AppModule { }
 
 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 
+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 JSX 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>
+```
+
+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.
+
+### Internal events
+
+Some of the component are using event to communicate with its parent/child. These events are not recommended to use in any way since
+they might change without notice. Their payload might also be changed based on refactoring of components. These events are prefixed
+with 'internal'. This is to make it as clear as possible to a user that this is an internal event that the components are using,
+but the user should not interact with it. E.g. `internalSddsPropsChange`.
+
 ## Browser support
 
 See the browser support section on [the Tegel website](https://tegel.scania.com/development/getting-started-development/introduction#browser-support).