@equinor/echo-framework 0.10.26 → 0.10.27

package/dist/services/deviceInformation/deepDeviceInfo.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="user-agent-data-types" />
+import UAParser from 'ua-parser-js';
+import { DetailedDeviceInformation } from '../../types/device';
+/**
+ * This object is concerned with gathering and holding information about the users device.
+ * This object will be read-only after initialization and should as a rule throw errors if the
+ * deviceInformation property is altered after intialization.
+ */
+declare class DetailedDeviceInformationProvider {
+    /** Represents the user agent string parser.
+     * This method is treated as a fallback if the User-Agent Client Hints API does not provide a coherent value
+     * or if the browser does not yet support it.
+     */
+    private readonly _uaParser;
+    /**
+     * Stores the system report from a call to the underlying system.
+     * - If this is undefined, it is not yet initialized (it happens asynchronously).
+     */
+    private readonly _uaDataValues;
+    /** Holds the current device information and should be the single source of truth.
+     *
+     * It can be undefined because we have to asynchronously fetch underlying system information.
+     */
+    private readonly _deviceInformation;
+    private constructor();
+    get deviceInformation(): DetailedDeviceInformation;
+    get uaDataValues(): UADataValues | null | undefined;
+    get uaParser(): UAParser.UAParserInstance;
+    /** Constructs the parser and returns it.  */
+    static initialize(): DetailedDeviceInformationProvider;
+    private static getPlatform;
+    private static getWebBrowser;
+    private static getOperatingSystem;
+    /**
+     * TODO: Get the device model from Client Hints API.
+     * This requires top-level await support, which in turn has to be implemented to modules downstream.
+     */
+    private static getDeviceModel;
+}
+declare const detailedDeviceInformationProvider: DetailedDeviceInformationProvider;
+export { DetailedDeviceInformationProvider, detailedDeviceInformationProvider };

package/dist/services/deviceInformation/deviceInfo.d.ts

@@ -0,0 +1,45 @@
+import { Browser, DetailedDeviceInformation, DeviceType, IDeviceSummary, ScreenDimensions, ScreenOrientation, UserInput } from '../../types/device';
+import { detailedDeviceInformationProvider } from './deepDeviceInfo';
+type Props = {
+    detailedDeviceInfo: typeof detailedDeviceInformationProvider;
+};
+declare class DeviceInformation {
+    /**
+     * Represents the current viewport orientation.
+     * If the viewport is square, it will default to portrait.
+     */
+    private _orientation;
+    /**
+     * Represents an abstracted device type: desktop, tablet or mobile.
+     */
+    private readonly _deviceType;
+    /**
+     * Represents the current input source.
+     * Note: On a touchscreen device which has a mouse plugged in, it will return the mouse.
+     */
+    private readonly _userInput;
+    private readonly _browser?;
+    /**
+     * Represents the viewport (layout and visual) and (full)screen dimensions.
+     * WebKit browsers prior to 15 will only support layout dimensions.
+     */
+    private _dimensions;
+    protected orientationIsLandscapeQuery: MediaQueryList;
+    private _detailedDeviceInfo;
+    constructor(props: Props);
+    private getUpdatedScreenDimensions;
+    private getBrowser;
+    private getUserInput;
+    /** Returns the current viewing medium.*/
+    private getDeviceType;
+    private getOrientation;
+    getDeviceDetails(): DetailedDeviceInformation;
+    get orientation(): ScreenOrientation;
+    get deviceType(): DeviceType;
+    get userInput(): UserInput;
+    get screenDimensions(): ScreenDimensions;
+    get browser(): Browser | undefined;
+    getDeviceSummary(): IDeviceSummary;
+}
+declare const deviceInfo: DeviceInformation;
+export { deviceInfo, DeviceInformation };

package/dist/types/device.d.ts

@@ -0,0 +1,53 @@
+export type SupportedPlatforms = 'Android' | 'Linux' | 'MacOs' | 'iOS' | 'iPadOS' | 'Windows' | 'Platform not found.';
+export type DetailedDeviceInformation = {
+    operatingSystem: string;
+    webBrowser: string;
+    deviceModel: string;
+    platform?: SupportedPlatforms;
+};
+export type IDeepDeviceInformation = {
+    operatingSystem: string;
+    webBrowser: string;
+    deviceModel: string;
+    platform?: SupportedPlatforms;
+};
+/** If the viewport is a square, then the orientation will be portrait. */
+export type ScreenOrientation = 'portrait' | 'landscape';
+/** Keep in mind, this is calculated when the page loads, so be sure to do refresh if simulating a device in DevTools. */
+export type DeviceType = 'mobile' | 'tablet' | 'desktop';
+export type UserInput = 'touch' | 'mouse';
+export type Browser = 'Chrome' | 'Safari' | 'Firefox' | 'Edge' | 'Opera';
+type Dimensions = {
+    width: number;
+    height: number;
+};
+export type ScreenDimensions = {
+    /** Provides measurements for use in the visual viewport.
+     *
+     * The visual viewport is the currently visible viewport and these dimensions
+     * can be smaller than the layout viewport if, for example, the user has pinch zoomed or summoned their
+     * on-screen keyboards.
+     */
+    visual: Dimensions;
+    /**
+     * Provides measurements for the layout viewport. These values are always fetched from
+     * innerHeight and innerWidth, so scrollbars are included.
+     */
+    layout?: Dimensions;
+    /** Provides measurements for use in fullscreen contexts. */
+    fullscreen?: FullscreenDimensions;
+};
+export type FullscreenDimensions = {
+    /** The total screen dimensions, essentially equal to the screen resolution configured in OS settings.*/
+    total: Dimensions;
+    /** The available screen dimensions, taking into account overlays such as browser address bar or virtual keyboard. */
+    available: Dimensions;
+};
+export interface IDeviceSummary {
+    orientation: ScreenOrientation;
+    deviceType: DeviceType;
+    userInput: UserInput;
+    screenDimensions: ScreenDimensions;
+    deepInfo: IDeepDeviceInformation;
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@equinor/echo-framework",
-    "version": "0.10.26",
+    "version": "0.10.27",
     "description": "Modules and components for EchoWeb, utilizing EchoCore",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -105,7 +105,8 @@
         "styled-components": "^5.3.6",
         "ts-jest": "^29.0.5",
         "tslib": "^2.4.1",
-        "typescript": "=4.9.4"
+        "typescript": "=4.9.4",
+        "user-agent-data-types": "^0.3.0"
     },
     "compilerOptions": {
         "declaration": true