@scania/tegel 0.0.1-beta.9 → 0.0.31

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,21 @@
+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>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): 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.31",
   "description": "Tegel - Scania's Digital Design System",
   "keywords": [
     "tegel",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.20.0",
+    "@stencil/core": "^3.0.0",
     "@storybook/addon-google-analytics": "^6.2.9",
     "concurrently": "^7.4.0",
     "dotenv": "^16.0.3",
@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
-    "@stencil/sass": "^2.0.1",
+    "@stencil/sass": "^2.0.3",
     "@storybook/addon-a11y": "^6.5.14",
     "@storybook/addon-actions": "^6.5.12",
     "@storybook/addon-essentials": "^6.5.12",

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).