@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/time/src/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Object for handling parsed time
+ */
+export type ParsedIsoDate = {
+    /**
+     * Date object reflecting parsed time
+     */
+    date: Date;
+    /**
+     * Timezone offset in minutes
+     */
+    timezoneOffset: number;
+    /**
+     * Miliseconds since epoch for parsed time
+     */
+    unixTime: number;
+};
+
+/**
+ * Time service response
+ */
+export type TimeServiceResp = {
+    /**
+     * An ISO-8601 valid string representing the current, local date/time.
+     */
+    datetime: string,
+};
+
+export type Config = {
+    /**
+     * Time service to obtain the current time e.g. from server. If unavailable,
+     * then system time is used.
+     */
+    timeService?: () => Promise<TimeServiceResp | null>,
+    /**
+     * Interval in milliseconds, to periodically synchronize the time with server.
+     */
+    syncIntervalMs?: number,
+};

package/packages/time/src/utils.ts

@@ -0,0 +1,79 @@
+import { MINUTES_PER_HOUR, HOURS_PER_DAY } from './constants';
+import { ParsedIsoDate } from './types';
+
+/*
+ * ISO 8601 date/time format:
+ * - YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)
+ * - YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00)
+ * where TZD = time zone designator (Z or +hh:mm or -hh:mm)
+ *
+ * Inspiration: https://www.w3.org/TR/NOTE-datetime
+ */
+// eslint-disable-next-line max-len
+const ISO_DATE_REGEXP = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})([.,]\d+)?([Z]|([+-])(\d{2}):(\d{2}))/;
+
+function integer(string: string | number) {
+    return parseInt(string.toString(), 10);
+}
+
+/**
+ * @param isoDateTimeStr a date/time string in ISO-8601 format:
+ * 1) YYYY-MM-DDThh:mm:ssTZD (eg. 1997-07-16T19:20:30+01:00)
+ * 2) YYYY-MM-DDThh:mm:ss.sTZD (eg. 1997-07-16T19:20:30.45+01:00)
+ * where TZD = time zone designator (Z or +hh:mm or -hh:mm)
+ * @return date object keeping parsed local datetime, timezone offset in
+ * minutes, unixTime in milliseconds. Null if parsing failed.
+ */
+export function parseIsoDate(isoDateTimeStr: string): ParsedIsoDate | null {
+    const m = ISO_DATE_REGEXP.exec(isoDateTimeStr);
+    /* eslint-disable no-magic-numbers */
+    if (m) {
+        const year = integer(m[1]);
+        const month = integer(m[2]);
+        const date = integer(m[3]);
+        const hours = integer(m[4]);
+        const minutes = integer(m[5]);
+        const seconds = integer(m[6]);
+        const milliseconds = m[7] ? integer(m[7] as any * 1000) : 0;
+
+        let timezoneOffset = 0;
+        if (m[8] !== 'Z') {
+            let offsetMinutes = integer(m[10]) * MINUTES_PER_HOUR + integer(m[11]);
+            if (m[9] === '-') {
+                offsetMinutes = -offsetMinutes;
+            }
+            timezoneOffset = offsetMinutes;
+        }
+
+        const serverLocalDate = new Date(
+            year, month - 1, date, hours, minutes, seconds, milliseconds,
+        );
+        const unixTime = Date.UTC(
+            year, month - 1, date, hours, minutes - timezoneOffset, seconds, milliseconds,
+        );
+
+        return { date: serverLocalDate, timezoneOffset, unixTime };
+    }
+    /* eslint-enable no-magic-numbers */
+    return null;
+}
+
+/**
+ * Returns the timestamp of the day start
+ * @param date The date representing the day
+ * @returns timestamp in ms
+ */
+export const getDayStart = (date: Date) => {
+    date.setHours(0, 0, 0, 0);
+    return date.getTime();
+};
+
+/**
+ * Returns the timestamp of the day end
+ * @param date The date representing the day
+ * @returns timestamp in ms
+ */
+export const getDayEnd = (date: Date) => {
+    date.setHours(HOURS_PER_DAY, 0, 0, 0);
+    return date.getTime();
+};

package/packages/toast/README.md

@@ -0,0 +1,116 @@
+---
+id: README
+title: Toast
+hide_title: true
+sidebar_label: Toast
+---
+
+# ToastService
+Service allows displaying time limited, short notification to the user. Toast can be your custom component or you can use predefined default Toast.
+
+## Provided functionality
+- ToastService handles toasts rendering and buffering logic, toast hiding and visuals are placed in the Toast component.
+- ToastService root can be placed anywhere, preferably at top of the application though.
+- One ToastService can operate simultaneously only one type of Toast component.
+- Focus and the rest of the application is unchanged
+
+## Usage
+Should be used almost identically as ThrobberService, but it isn't using ModalService under the hood. Ideally ToastService needs to be placed near the application root.
+
+## Props
+- `toast: (props: T) => JSX.Element` - function wraps passed toast component (`<Toast />` or a custom component) to mount at the toast root element.
+
+```tsx
+import { Toast, ToastService, ToastProps } from '@24i/bigscreen-sdk/toast';
+
+const toastServiceRef = createRef<ToastService<ToastProps>>();
+
+<App>
+    <ToastService
+        toast={(props: ToastProps) => <Toast {...props} />}
+        ref={toastServiceRef}
+    />
+</App>
+```
+
+To show Toast, service reference has to be used.
+```ts
+toastServiceRef.show({
+    message: 'Hello, I am Toast!',
+});
+```
+
+# Toast
+For particular cases, default Toast component could be used. It has it's default style and implements simple fading logic. Toast is visible for certain time (`duration`) and then it began to hide with fade out effect (`hidingAnimTimeoutMs`). Toast component does not import styles by default, so custom or default styles needs to be imported before use.
+
+```ts
+toastServiceRef.show({
+    message: 'Hello, I am longer Toast!',
+    duration: 1500,                 // optional - how long toast would be fully displayed (default is 800 ms)
+    hidingAnimTimeoutMs: 500,       // optional - how long it take to hide with decreasing fade out hiding animation (default is 300 ms)
+    onFinish: () => noop,           // optional - callback to execute after hiding Toast Component
+});
+```
+
+Toast renders by default this DOM structure:
+```tsx
+<div className="toast-wrap">
+    <div className="toast">
+        <div className="toast-text">
+            {message}
+        </div>
+    </div>
+</div>
+```
+
+# Toast custom render
+Toast component has ability to render custom DOM content. Its for easier customization rather than creating whole new component because for example one additional DIV element. For these situation there is optional `render` parameter in props.
+
+```ts
+export type ToastRenderProps = {
+    toastWrapperRef: Reference<HTMLDivElement>,
+    message: string,
+};
+
+render?: (toastWrapperRef: ToastRenderProps) => JSX.Element;
+```
+
+Function takes object with type `ToastRenderProps` as only parameter. In this type, first parameter is `toastWrapperRef` which is reference to your custom wrapper element used in Toast component and `message` is text to be shown in Toast. Toast created with custom render function could look like this:
+
+```tsx
+const customRender = ({ toastWrapperRef, message }) => (
+    <div ref={toastWrapperRef} className="my-toast-wrap">
+        {message}
+    </div>
+);
+
+<ToastService
+    toast={(props: ToastProps) => (
+        <Toast
+            {...props}
+            render={customRender}
+        />
+    )}
+    ref={toastServiceRef}
+/>
+```
+
+You can also set custom render function in ToastService `show` method as a part of Toast props.
+
+# Custom toast
+Toast component's props needs to be extended from MinimalToastProps which includes methods for proper service working (`toastServiceContinue` and optionally `onFinish`).
+
+Important: callback `toastServiceContinue` then needs to be called after toast ends its lifetime. Callback onFinish is also handled in ToastService and ideally should not be called inside custom toast component.
+
+```ts
+type MyToastProps = {
+    ...
+} & MinimalToastProps;
+
+class MyToast extends Components<MyToastProps> {
+    destroy() {
+        const { toastServiceContinue } = this.props;
+        toastServiceContinue();
+    }
+}
+```

package/packages/toast/src/Toast/IVisualController.ts

@@ -0,0 +1,7 @@
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+
+export abstract class IVisualController {
+    toastWrapperRef = createRef<HTMLDivElement>();
+
+    abstract hide(hidingTimeout: number, finishCallback: () => void): void;
+}

package/packages/toast/src/Toast/Toast.scss

@@ -0,0 +1,22 @@
+.toast-wrap {
+    position: absolute;
+    text-align: center;
+    top: $toast-wrap-top;
+    opacity: 1;
+    width: $toast-wrap-width;
+    left: 0;
+    right: 0;
+    z-index: 800;
+
+    >.toast {
+        display: inline-block;
+        color: #000;
+        background-color: #fff;
+        font-size: $toast-font-size;
+        padding-left: $toast-padding-left;
+        padding-right: $toast-padding-right;
+        padding-top: $toast-padding-top;
+        padding-bottom: $toast-padding-bottom;
+        border-radius: $toast-border-radius;
+    }
+}

package/packages/toast/src/Toast/Toast.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './Toast';

package/packages/toast/src/Toast/Toast.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './Toast';

package/packages/toast/src/Toast/Toast.tsx

@@ -0,0 +1,83 @@
+import { Component, DeclareProps, Reference, removeNode } from '@24i/bigscreen-sdk/jsx';
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { MinimalToastProps } from '../types';
+import { VisualController } from './VisualController';
+
+const DEFAULT_DURATION = 800;
+const DEFAULT_HIDING_ANIM_TIMEOUT = 300;
+
+export type ToastRenderProps = {
+    toastWrapperRef: Reference<HTMLDivElement>,
+    message: string,
+};
+
+export type ToastProps = {
+    message: string,
+    duration?: number,
+    hidingAnimTimeoutMs?: number,
+    render?: (renderProps: ToastRenderProps) => JSX.Element,
+} & MinimalToastProps;
+
+export class Toast extends Component<ToastProps> {
+    visualController = new VisualController();
+
+    hideTimeout = createTimeout();
+
+    static defaultProps = {
+        duration: DEFAULT_DURATION,
+        hidingAnimTimeoutMs: DEFAULT_HIDING_ANIM_TIMEOUT,
+    };
+
+    declare props: DeclareProps<ToastProps, typeof Toast.defaultProps>;
+
+    componentDidMount() {
+        this.start();
+    }
+
+    componentWillUnmount() {
+        this.clear();
+    }
+
+    destroy = () => {
+        const { toastServiceContinue } = this.props;
+        removeNode(this.visualController.toastWrapperRef.current!);
+        toastServiceContinue();
+    };
+
+    start() {
+        const { duration, hidingAnimTimeoutMs } = this.props;
+        this.hideTimeout.set(() => {
+            if (hidingAnimTimeoutMs) {
+                this.visualController.hide(hidingAnimTimeoutMs, this.destroy);
+            } else {
+                this.destroy();
+            }
+        }, duration);
+    }
+
+    clear() {
+        this.hideTimeout.clear();
+    }
+
+    render() {
+        const { message, render } = this.props;
+        if (typeof render === 'function') {
+            return render({
+                toastWrapperRef: this.visualController.toastWrapperRef,
+                message,
+            });
+        }
+        return (
+            <div
+                className="toast-wrap"
+                ref={this.visualController.toastWrapperRef}
+            >
+                <div className="toast">
+                    <div className="toast-text">
+                        {message}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

package/packages/toast/src/Toast/VisualController.animated.ts

@@ -0,0 +1,20 @@
+import { AnimationUtils, JSAnimations } from '@24i/bigscreen-sdk/animations';
+import { noop } from '@24i/bigscreen-sdk/utils/noop';
+import { IVisualController } from './IVisualController';
+
+export class VisualController extends IVisualController {
+    finishCallback: () => void = noop;
+
+    onFrame = (value: number) => {
+        this.toastWrapperRef.current!.style.opacity = value.toString();
+        if (value === 0) {
+            this.finishCallback();
+        }
+    };
+
+    hide(hidingTimeoutMs: number, finishCallback: () => void): void {
+        const animation = new JSAnimations();
+        this.finishCallback = finishCallback;
+        animation.start(1, 0, hidingTimeoutMs, AnimationUtils.ease).onFrame(this.onFrame);
+    }
+}

package/packages/toast/src/Toast/VisualController.ts

@@ -0,0 +1,9 @@
+import { createTimeout } from '@24i/bigscreen-sdk/utils/timers';
+import { IVisualController } from './IVisualController';
+
+export class VisualController extends IVisualController {
+    hide(hidingTimeoutMs: number, finishCallback: () => void): void {
+        const hideTimeout = createTimeout();
+        hideTimeout.set(finishCallback, hidingTimeoutMs);
+    }
+}

package/packages/toast/src/Toast/_sizes.1080.scss

@@ -0,0 +1,8 @@
+$toast-wrap-top: 945px;
+$toast-wrap-width: 1920px;
+$toast-font-size: 27px;
+$toast-padding-left: 23px;
+$toast-padding-right: 23px;
+$toast-padding-top: 8px;
+$toast-padding-bottom: 8px;
+$toast-border-radius: 30px;

package/packages/toast/src/Toast/_sizes.scss

@@ -0,0 +1,8 @@
+$toast-wrap-top: 630px;
+$toast-wrap-width: 1280px;
+$toast-font-size: 18px;
+$toast-padding-left: 15px;
+$toast-padding-right: 15px;
+$toast-padding-top: 5px;
+$toast-padding-bottom: 5px;
+$toast-border-radius: 20px;

package/packages/toast/src/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './Toast';
+export type { ToastProps, ToastRenderProps } from './Toast';

package/packages/toast/src/Toast/styles.ts

@@ -0,0 +1 @@
+import './Toast.styles';

package/packages/toast/src/ToastService.scss

@@ -0,0 +1,7 @@
+.toast-service-root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+};

package/packages/toast/src/ToastService.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './ToastService';

package/packages/toast/src/ToastService.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './ToastService';

package/packages/toast/src/ToastService.tsx

@@ -0,0 +1,48 @@
+import { Component, createRef } from '@24i/bigscreen-sdk/jsx';
+import { MinimalToastProps } from './types';
+import './ToastService.styles';
+
+type Props<T extends MinimalToastProps> = {
+    toast: (props: T) => JSX.Element,
+};
+
+export class ToastService<T extends MinimalToastProps> extends Component<Props<T>> {
+    rootDivRef = createRef<HTMLDivElement>();
+
+    toastElementBuffer: JSX.Element[] = [];
+
+    isShowingToast = false;
+
+    serviceContinue = () => {
+        const toastElement = this.toastElementBuffer.shift();
+        if (toastElement) {
+            this.appendMount(toastElement, this.rootDivRef);
+        } else {
+            this.isShowingToast = false;
+        }
+    };
+
+    show(props: Omit<T, 'toastServiceContinue'>) {
+        const { toast } = this.props;
+        const { onFinish } = props;
+        const toastElement = toast({
+            ...props,
+            toastServiceContinue: () => {
+                if (onFinish) {
+                    onFinish();
+                }
+                this.serviceContinue();
+            },
+        } as T);
+        if (!this.isShowingToast) {
+            this.appendMount(toastElement, this.rootDivRef);
+            this.isShowingToast = true;
+        } else {
+            this.toastElementBuffer.push(toastElement);
+        }
+    }
+
+    render() {
+        return <div className="toast-service-root" ref={this.rootDivRef} />;
+    }
+}

package/packages/toast/src/_sizes.1080.scss

@@ -0,0 +1,2 @@
+$toast-root-width: 1920px;
+$toast-root-height: 1080px;

package/packages/toast/src/_sizes.scss

@@ -0,0 +1,2 @@
+$toast-root-width: 1280px;
+$toast-root-height: 720px;

package/packages/toast/src/index.ts

@@ -0,0 +1,4 @@
+export type { MinimalToastProps } from './types';
+export { Toast } from './Toast';
+export type { ToastProps, ToastRenderProps } from './Toast';
+export { ToastService } from './ToastService';

package/packages/toast/src/types.ts

@@ -0,0 +1,4 @@
+export type MinimalToastProps = {
+    onFinish?: () => void,
+    toastServiceContinue: ()=> void,
+};

package/packages/types-bigscreen-jsx/README.md

@@ -0,0 +1,11 @@
+# BIGscreen JSX Types
+BIGscreen JSX is a set of tools that allow you to write JSX and converts it to JS Dom API.
+This package contains types originally from @types/react, modified for smartapps-bigscreen-jsx needs.
+
+# Contributing
+Navigate to `<root>/packages/types-smartapps-bigscreen-jsx/node_modules/@types/react/`.
+All react types are inside files `index.d.ts` and `global.d.ts`. Modify them to suit your needs and afterwards run this command in the `packages/types-smartapps-bigscreen-jsx/` directory:
+
+`npx patch-package @types/react`
+
+You can confirm everything worked by looking into `packages/types-smartapps-bigscreen-jsx/patches/`. You should see a file named `@types+react+<version-etc>.patch` that includes diff of your changes.

package/packages/types-bigscreen-jsx/global.d.ts

@@ -0,0 +1,155 @@
+/*
+React projects that don't include the DOM library need these interfaces to compile.
+React Native applications use React, but there is no DOM available. The JavaScript runtime
+is ES6/ES2015 only. These definitions allow such projects to compile with only `--lib ES6`.
+
+Warning: all of these interfaces are empty. If you want type definitions for various properties
+(such as HTMLInputElement.prototype.value), you need to add `--lib DOM` (via command line or tsconfig.json).
+*/
+
+interface Event { }
+interface AnimationEvent extends Event { }
+interface ClipboardEvent extends Event { }
+interface CompositionEvent extends Event { }
+interface DragEvent extends Event { }
+interface FocusEvent extends Event { }
+interface KeyboardEvent extends Event { }
+interface MouseEvent extends Event { }
+interface TouchEvent extends Event { }
+interface PointerEvent extends Event { }
+interface TransitionEvent extends Event { }
+interface UIEvent extends Event { }
+interface WheelEvent extends Event { }
+
+interface EventTarget { }
+interface Document { }
+interface DataTransfer { }
+interface StyleMedia { }
+
+interface Element { }
+interface DocumentFragment { }
+
+interface HTMLElement extends Element { }
+interface HTMLAnchorElement extends HTMLElement { }
+interface HTMLAreaElement extends HTMLElement { }
+interface HTMLAudioElement extends HTMLElement { }
+interface HTMLBaseElement extends HTMLElement { }
+interface HTMLBodyElement extends HTMLElement { }
+interface HTMLBRElement extends HTMLElement { }
+interface HTMLButtonElement extends HTMLElement { }
+interface HTMLCanvasElement extends HTMLElement { }
+interface HTMLDataElement extends HTMLElement { }
+interface HTMLDataListElement extends HTMLElement { }
+interface HTMLDetailsElement extends HTMLElement { }
+interface HTMLDialogElement extends HTMLElement { }
+interface HTMLDivElement extends HTMLElement { }
+interface HTMLDListElement extends HTMLElement { }
+interface HTMLEmbedElement extends HTMLElement { }
+interface HTMLFieldSetElement extends HTMLElement { }
+interface HTMLFormElement extends HTMLElement { }
+interface HTMLHeadingElement extends HTMLElement { }
+interface HTMLHeadElement extends HTMLElement { }
+interface HTMLHRElement extends HTMLElement { }
+interface HTMLHtmlElement extends HTMLElement { }
+interface HTMLIFrameElement extends HTMLElement { }
+interface HTMLImageElement extends HTMLElement { }
+interface HTMLInputElement extends HTMLElement { }
+interface HTMLModElement extends HTMLElement { }
+interface HTMLLabelElement extends HTMLElement { }
+interface HTMLLegendElement extends HTMLElement { }
+interface HTMLLIElement extends HTMLElement { }
+interface HTMLLinkElement extends HTMLElement { }
+interface HTMLMapElement extends HTMLElement { }
+interface HTMLMetaElement extends HTMLElement { }
+interface HTMLMeterElement extends HTMLElement { }
+interface HTMLObjectElement extends HTMLElement { }
+interface HTMLOListElement extends HTMLElement { }
+interface HTMLOptGroupElement extends HTMLElement { }
+interface HTMLOptionElement extends HTMLElement { }
+interface HTMLOutputElement extends HTMLElement { }
+interface HTMLParagraphElement extends HTMLElement { }
+interface HTMLParamElement extends HTMLElement { }
+interface HTMLPreElement extends HTMLElement { }
+interface HTMLProgressElement extends HTMLElement { }
+interface HTMLQuoteElement extends HTMLElement { }
+interface HTMLSlotElement extends HTMLElement { }
+interface HTMLScriptElement extends HTMLElement { }
+interface HTMLSelectElement extends HTMLElement { }
+interface HTMLSourceElement extends HTMLElement { }
+interface HTMLSpanElement extends HTMLElement { }
+interface HTMLStyleElement extends HTMLElement { }
+interface HTMLTableElement extends HTMLElement { }
+interface HTMLTableColElement extends HTMLElement { }
+interface HTMLTableDataCellElement extends HTMLElement { }
+interface HTMLTableHeaderCellElement extends HTMLElement { }
+interface HTMLTableRowElement extends HTMLElement { }
+interface HTMLTableSectionElement extends HTMLElement { }
+interface HTMLTemplateElement extends HTMLElement { }
+interface HTMLTextAreaElement extends HTMLElement { }
+interface HTMLTimeElement extends HTMLElement { }
+interface HTMLTitleElement extends HTMLElement { }
+interface HTMLTrackElement extends HTMLElement { }
+interface HTMLUListElement extends HTMLElement { }
+interface HTMLVideoElement extends HTMLElement { }
+interface HTMLWebViewElement extends HTMLElement { }
+
+interface SVGElement extends Element { }
+interface SVGSVGElement extends SVGElement { }
+interface SVGCircleElement extends SVGElement { }
+interface SVGClipPathElement extends SVGElement { }
+interface SVGDefsElement extends SVGElement { }
+interface SVGDescElement extends SVGElement { }
+interface SVGEllipseElement extends SVGElement { }
+interface SVGFEBlendElement extends SVGElement { }
+interface SVGFEColorMatrixElement extends SVGElement { }
+interface SVGFEComponentTransferElement extends SVGElement { }
+interface SVGFECompositeElement extends SVGElement { }
+interface SVGFEConvolveMatrixElement extends SVGElement { }
+interface SVGFEDiffuseLightingElement extends SVGElement { }
+interface SVGFEDisplacementMapElement extends SVGElement { }
+interface SVGFEDistantLightElement extends SVGElement { }
+interface SVGFEDropShadowElement extends SVGElement { }
+interface SVGFEFloodElement extends SVGElement { }
+interface SVGFEFuncAElement extends SVGElement { }
+interface SVGFEFuncBElement extends SVGElement { }
+interface SVGFEFuncGElement extends SVGElement { }
+interface SVGFEFuncRElement extends SVGElement { }
+interface SVGFEGaussianBlurElement extends SVGElement { }
+interface SVGFEImageElement extends SVGElement { }
+interface SVGFEMergeElement extends SVGElement { }
+interface SVGFEMergeNodeElement extends SVGElement { }
+interface SVGFEMorphologyElement extends SVGElement { }
+interface SVGFEOffsetElement extends SVGElement { }
+interface SVGFEPointLightElement extends SVGElement { }
+interface SVGFESpecularLightingElement extends SVGElement { }
+interface SVGFESpotLightElement extends SVGElement { }
+interface SVGFETileElement extends SVGElement { }
+interface SVGFETurbulenceElement extends SVGElement { }
+interface SVGFilterElement extends SVGElement { }
+interface SVGForeignObjectElement extends SVGElement { }
+interface SVGGElement extends SVGElement { }
+interface SVGImageElement extends SVGElement { }
+interface SVGLineElement extends SVGElement { }
+interface SVGLinearGradientElement extends SVGElement { }
+interface SVGMarkerElement extends SVGElement { }
+interface SVGMaskElement extends SVGElement { }
+interface SVGMetadataElement extends SVGElement { }
+interface SVGPathElement extends SVGElement { }
+interface SVGPatternElement extends SVGElement { }
+interface SVGPolygonElement extends SVGElement { }
+interface SVGPolylineElement extends SVGElement { }
+interface SVGRadialGradientElement extends SVGElement { }
+interface SVGRectElement extends SVGElement { }
+interface SVGStopElement extends SVGElement { }
+interface SVGSwitchElement extends SVGElement { }
+interface SVGSymbolElement extends SVGElement { }
+interface SVGTextElement extends SVGElement { }
+interface SVGTextPathElement extends SVGElement { }
+interface SVGTSpanElement extends SVGElement { }
+interface SVGUseElement extends SVGElement { }
+interface SVGViewElement extends SVGElement { }
+
+interface Text { }
+interface TouchList { }
+interface WebGLRenderingContext { }
+interface WebGL2RenderingContext { }