@24i/bigscreen-sdk 1.0.40-alpha.2687 → 1.0.40

package/packages/menu/src/WhitelabelMenu/VisualControllerBase.ts

@@ -1,71 +1,71 @@
-import { createRef } from '@24i/bigscreen-sdk/jsx';
-import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
-
-/**
- * **VisualControllerBase**
- */
-export abstract class VisualControllerBase {
-    /**
-     * Main wrap element.
-     */
-    div = createRef<HTMLDivElement>();
-
-    /**
-     * DisplayToggler for the {@link VisualControllerBase.div main wrap element}.
-     */
-    displayToggler = getDisplayToggler(this.div, true);
-
-    /**
-     * Overlay element.
-     */
-    overlay = createRef<HTMLDivElement>();
-
-    /**
-     * Focus element.
-     */
-    focus = createRef<HTMLDivElement>();
-
-    /**
-     * Padding at the top.
-     */
-    paddingTop: number;
-
-    /**
-     * Height of the item.
-     */
-    itemHeight: number;
-
-    /**
-     * Space between items.
-     */
-    itemMargin: number;
-
-    /**
-     * Constructor.
-     * @param paddingTop padding at the top
-     * @param itemHeight height of the item
-     * @param itemMargin space between items
-     */
-    constructor(paddingTop: number, itemHeight: number, itemMargin: number) {
-        this.paddingTop = paddingTop;
-        this.itemHeight = itemHeight;
-        this.itemMargin = itemMargin;
-    }
-
-    /**
-     * Returns the open state of the menu.
-     * @returns true if menu is open, false otherwise
-     */
-    isOpen = () => this.displayToggler.isVisible();
-
-    /**
-     * Noop version if not needed.
-     * @param index of the focused item
-     */
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onFocusChanged(index: number) {}
-
-    abstract open(): void;
-
-    abstract close(): void;
-}
+import { createRef } from '@24i/bigscreen-sdk/jsx';
+import { getDisplayToggler } from '@24i/bigscreen-sdk/utils/displayToggler';
+
+/**
+ * **VisualControllerBase**
+ */
+export abstract class VisualControllerBase {
+    /**
+     * Main wrap element.
+     */
+    div = createRef<HTMLDivElement>();
+
+    /**
+     * DisplayToggler for the {@link VisualControllerBase.div main wrap element}.
+     */
+    displayToggler = getDisplayToggler(this.div, true);
+
+    /**
+     * Overlay element.
+     */
+    overlay = createRef<HTMLDivElement>();
+
+    /**
+     * Focus element.
+     */
+    focus = createRef<HTMLDivElement>();
+
+    /**
+     * Padding at the top.
+     */
+    paddingTop: number;
+
+    /**
+     * Height of the item.
+     */
+    itemHeight: number;
+
+    /**
+     * Space between items.
+     */
+    itemMargin: number;
+
+    /**
+     * Constructor.
+     * @param paddingTop padding at the top
+     * @param itemHeight height of the item
+     * @param itemMargin space between items
+     */
+    constructor(paddingTop: number, itemHeight: number, itemMargin: number) {
+        this.paddingTop = paddingTop;
+        this.itemHeight = itemHeight;
+        this.itemMargin = itemMargin;
+    }
+
+    /**
+     * Returns the open state of the menu.
+     * @returns true if menu is open, false otherwise
+     */
+    isOpen = () => this.displayToggler.isVisible();
+
+    /**
+     * Noop version if not needed.
+     * @param index of the focused item
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onFocusChanged(index: number) {}
+
+    abstract open(): void;
+
+    abstract close(): void;
+}

package/packages/menu/src/WhitelabelMenu/_animated.scss

@@ -1,39 +1,39 @@
-@import '@24i/bigscreen-sdk/sass-utils/transform';
-@import '@24i/bigscreen-sdk/sass-utils/transition';
-@import '@24i/bigscreen-sdk/sass-utils/prefix-property';
-
-.menu-container .side-menu {
-    @include transform(translate3d(0, 0, 0));
-    @include transition(prefix-property(transform), 300ms);
-
-    .overlay {
-        @include transition(prefix-property(transform), 300ms);
-        width: $menu-width + $overlay-width;
-        opacity: 1;
-
-        &.display-none {
-            display: none;
-        }
-    }
-
-    .focus {
-        @include transform(translate3d(0, 0, 0));
-        @include transition(prefix-property(transform), 300ms);
-        position: absolute;
-        top: 0;
-        left: $focus-left;
-        width: $focus-width;
-        height: $focus-height;
-        margin-top: $focus-margin-top;
-        border-radius: $focus-border-radius 0 0 $focus-border-radius;
-    }
-
-    &.display-none {
-        @include transform(translate3d(-$menu-width, 0, 0));
-        display: block;
-
-        .overlay {
-            opacity: 0;
-        }
-    }
-}
+@import '@24i/bigscreen-sdk/sass-utils/transform';
+@import '@24i/bigscreen-sdk/sass-utils/transition';
+@import '@24i/bigscreen-sdk/sass-utils/prefix-property';
+
+.menu-container .side-menu {
+    @include transform(translate3d(0, 0, 0));
+    @include transition(prefix-property(transform), 300ms);
+
+    .overlay {
+        @include transition(prefix-property(transform), 300ms);
+        width: $menu-width + $overlay-width;
+        opacity: 1;
+
+        &.display-none {
+            display: none;
+        }
+    }
+
+    .focus {
+        @include transform(translate3d(0, 0, 0));
+        @include transition(prefix-property(transform), 300ms);
+        position: absolute;
+        top: 0;
+        left: $focus-left;
+        width: $focus-width;
+        height: $focus-height;
+        margin-top: $focus-margin-top;
+        border-radius: $focus-border-radius 0 0 $focus-border-radius;
+    }
+
+    &.display-none {
+        @include transform(translate3d(-$menu-width, 0, 0));
+        display: block;
+
+        .overlay {
+            opacity: 0;
+        }
+    }
+}

package/packages/menu/src/WhitelabelMenu/_sizes.1080.scss

@@ -1,14 +1,14 @@
-$menu-width: 516px;
-$menu-height: 1080px;
-
-$overlay-width: 1920px;
-$overlay-height: 1080px;
-
-$focus-left: 124px;
-$focus-width: 392px;
-$focus-height: 90px;
-$focus-margin-top: 8px;
-$focus-border-radius: 8px;
-
-$menu-shadow-width: 240px;
-$menu-shadow-image: url('./assets/shadow.1080.png');
+$menu-width: 516px;
+$menu-height: 1080px;
+
+$overlay-width: 1920px;
+$overlay-height: 1080px;
+
+$focus-left: 124px;
+$focus-width: 392px;
+$focus-height: 90px;
+$focus-margin-top: 8px;
+$focus-border-radius: 8px;
+
+$menu-shadow-width: 240px;
+$menu-shadow-image: url('./assets/shadow.1080.png');

package/packages/menu/src/WhitelabelMenu/_sizes.scss

@@ -1,14 +1,14 @@
-$menu-width: 344px;
-$menu-height: 720px;
-
-$overlay-width: 1280px;
-$overlay-height: 720px;
-
-$focus-left: 82px;
-$focus-width: 262px;
-$focus-height: 60px;
-$focus-margin-top: 5px;
-$focus-border-radius: 6px;
-
-$menu-shadow-width: 160px;
-$menu-shadow-image: url('./assets/shadow.720.png');
+$menu-width: 344px;
+$menu-height: 720px;
+
+$overlay-width: 1280px;
+$overlay-height: 720px;
+
+$focus-left: 82px;
+$focus-width: 262px;
+$focus-height: 60px;
+$focus-margin-top: 5px;
+$focus-border-radius: 6px;
+
+$menu-shadow-width: 160px;
+$menu-shadow-image: url('./assets/shadow.720.png');

package/packages/menu/src/WhitelabelMenu/constants.animated.ts

@@ -1 +1 @@
-export const animated = true;
+export const animated = true;

package/packages/menu/src/WhitelabelMenu/constants.ts

@@ -1 +1 @@
-export const animated = false;
+export const animated = false;

package/packages/menu/src/WhitelabelMenu/index.ts

@@ -1 +1 @@
-export { SideMenu } from './SideMenu';
+export { SideMenu } from './SideMenu';

package/packages/menu/src/WhitelabelMenu/interface.ts

@@ -1,14 +1,14 @@
-import { Component } from '@24i/bigscreen-sdk/jsx';
-import { MenuProps, Menu } from '../MenuAndContentContainer/interface';
-
-/**
- * **{@link SideMenu} Props**
- * @see MenuProps ({@link MenuProps}).
- */
-export type Props = MenuProps;
-
-/**
- * **SideMenu interface**
- * SideMenu extends normal {@link Component} and also {@link Menu} interface.
- */
-export interface SideMenu extends Component<Props>, Menu {}
+import { Component } from '@24i/bigscreen-sdk/jsx';
+import { MenuProps, Menu } from '../MenuAndContentContainer/interface';
+
+/**
+ * **{@link SideMenu} Props**
+ * @see MenuProps ({@link MenuProps}).
+ */
+export type Props = MenuProps;
+
+/**
+ * **SideMenu interface**
+ * SideMenu extends normal {@link Component} and also {@link Menu} interface.
+ */
+export interface SideMenu extends Component<Props>, Menu {}

package/packages/menu/src/WhitelabelMenu/rtl.scss

@@ -1,22 +1,22 @@
-@import '@24i/bigscreen-sdk/sass-utils/transform';
-
-[dir=rtl] .menu-container .side-menu {
-    left: auto;
-    right: 0;
-
-    .menu,
-    .overlay {
-        left: auto;
-        right: 0;
-    }
-
-    .shadow {
-        @include transform(scaleX(-1)); // mirror bg-image horizontally
-        left: auto;
-        right: $menu-width;
-    }
-
-    &.display-none {
-        @include transform(translate3d($menu-width, 0, 0));
-    }
-}
+@import '@24i/bigscreen-sdk/sass-utils/transform';
+
+[dir=rtl] .menu-container .side-menu {
+    left: auto;
+    right: 0;
+
+    .menu,
+    .overlay {
+        left: auto;
+        right: 0;
+    }
+
+    .shadow {
+        @include transform(scaleX(-1)); // mirror bg-image horizontally
+        left: auto;
+        right: $menu-width;
+    }
+
+    &.display-none {
+        @include transform(translate3d($menu-width, 0, 0));
+    }
+}

package/packages/menu/src/WhitelabelMenu/sizes.1080.ts

@@ -1 +1 @@
-export const height = 1080;
+export const height = 1080;

package/packages/menu/src/WhitelabelMenu/sizes.ts

@@ -1 +1 @@
-export const height = 720;
+export const height = 720;

package/packages/menu/src/WhitelabelMenu/styles.ts

@@ -1 +1 @@
-import './SideMenu.styles';
+import './SideMenu.styles';

package/packages/menu/src/WhitelabelMenu/utils.ts

@@ -1,34 +1,34 @@
-import { device } from '@24i/bigscreen-sdk/device';
-import { BACK } from '@24i/bigscreen-sdk/device/keymap';
-import { isRtl } from '@24i/bigscreen-sdk/i18n';
-
-const MOUSE_THRESHOLD_PX = 10;
-
-/**
- * Determines whether the menu should be opened with mouse/mrcu.
- * @param clientX position of the pointer on the screen in pixels
- * @returns true for open the menu, false otherwise
- */
-export const shouldOpenMenuWithMouse = ({ clientX }: { clientX: number }) => (
-    isRtl()
-        ? clientX + MOUSE_THRESHOLD_PX > window.innerWidth
-        : clientX < MOUSE_THRESHOLD_PX
-);
-
-/**
- * Determines whether the menu should be opened with keyboard.
- * @param event keyboard event
- * @returns true for open the menu, false otherwise
- */
-export const shouldOpenMenu = (event: KeyboardEvent) => (
-    device.isDirectionLeft(event) || BACK.is(event)
-);
-
-/**
- * Determines whether the menu should be closed with keyboard.
- * @param event keyboard event
- * @returns true for close the menu, false otherwise
- */
-export const shouldCloseMenu = (event: KeyboardEvent) => (
-    device.isDirectionRight(event)
-);
+import { device } from '@24i/bigscreen-sdk/device';
+import { BACK } from '@24i/bigscreen-sdk/device/keymap';
+import { isRtl } from '@24i/bigscreen-sdk/i18n';
+
+const MOUSE_THRESHOLD_PX = 10;
+
+/**
+ * Determines whether the menu should be opened with mouse/mrcu.
+ * @param clientX position of the pointer on the screen in pixels
+ * @returns true for open the menu, false otherwise
+ */
+export const shouldOpenMenuWithMouse = ({ clientX }: { clientX: number }) => (
+    isRtl()
+        ? clientX + MOUSE_THRESHOLD_PX > window.innerWidth
+        : clientX < MOUSE_THRESHOLD_PX
+);
+
+/**
+ * Determines whether the menu should be opened with keyboard.
+ * @param event keyboard event
+ * @returns true for open the menu, false otherwise
+ */
+export const shouldOpenMenu = (event: KeyboardEvent) => (
+    device.isDirectionLeft(event) || BACK.is(event)
+);
+
+/**
+ * Determines whether the menu should be closed with keyboard.
+ * @param event keyboard event
+ * @returns true for close the menu, false otherwise
+ */
+export const shouldCloseMenu = (event: KeyboardEvent) => (
+    device.isDirectionRight(event)
+);

package/packages/menu/src/index.ts

@@ -1,2 +1,2 @@
-export { MenuAndContentContainer } from './MenuAndContentContainer';
-export { service as menuService } from './MenuAndContentContainer/service';
+export { MenuAndContentContainer } from './MenuAndContentContainer';
+export { service as menuService } from './MenuAndContentContainer/service';

package/packages/modal-service/README.md

@@ -1,51 +1,51 @@
----
-id: README
-title: Modal Service
-hide_title: true
-sidebar_label: Modal Service
----
-
-# Modal Service
-A component which helps managing modal windows. Handles rendering and focus management.
-
-## Props
-- ```ref``` - the reference to the modal service instance
-- ```className``` - custom class name for modal service div
-- ```isFocusable``` - whether is modal focusable or not
-- ```onCloseLastModal``` - function called when the last modal is closed
-
-## Provided functionality
-- exports interface which needs to be implemented by the modal component
-- handles rendering and clearing of modal components
-- handles focus updates
-
-## Service interface
-```ts
-getMountedComponent(): ModalComponent // returns currently mounted modal component
-open(component: ModalComponent): void // opens provided component instance which extends ModalComponent
-close(focusable?: IFocusable): void // closes modal window and gives focus to provided component or to previous focused element
-```
-
-## Usage
-Modal service first needs to be rendered with ref property, this renders styled container div for modal windows.
-```tsx
-<App>
-    <ModalService ref={modalServiceRef}/>
-</App>
-```
-
-Modal components should implement IModal interface
-```ts
-class MyModalComponent extends Component<Props> implements IModal {
-    focus() {...}
-    render() {...}
-}
-```
-
-The reference is later used to open and close modal windows.
-```tsx
-modalServiceRef.current.open<MyModalComponent>((ref) => (
-    <MyModalComponent ref={ref} {...props} />
-));
-modalServiceRef.current.close();
+---
+id: README
+title: Modal Service
+hide_title: true
+sidebar_label: Modal Service
+---
+
+# Modal Service
+A component which helps managing modal windows. Handles rendering and focus management.
+
+## Props
+- ```ref``` - the reference to the modal service instance
+- ```className``` - custom class name for modal service div
+- ```isFocusable``` - whether is modal focusable or not
+- ```onCloseLastModal``` - function called when the last modal is closed
+
+## Provided functionality
+- exports interface which needs to be implemented by the modal component
+- handles rendering and clearing of modal components
+- handles focus updates
+
+## Service interface
+```ts
+getMountedComponent(): ModalComponent // returns currently mounted modal component
+open(component: ModalComponent): void // opens provided component instance which extends ModalComponent
+close(focusable?: IFocusable): void // closes modal window and gives focus to provided component or to previous focused element
+```
+
+## Usage
+Modal service first needs to be rendered with ref property, this renders styled container div for modal windows.
+```tsx
+<App>
+    <ModalService ref={modalServiceRef}/>
+</App>
+```
+
+Modal components should implement IModal interface
+```ts
+class MyModalComponent extends Component<Props> implements IModal {
+    focus() {...}
+    render() {...}
+}
+```
+
+The reference is later used to open and close modal windows.
+```tsx
+modalServiceRef.current.open<MyModalComponent>((ref) => (
+    <MyModalComponent ref={ref} {...props} />
+));
+modalServiceRef.current.close();
 ```

package/packages/modal-service/src/IModal.ts

@@ -1,3 +1,3 @@
-import { IFocusable } from '@24i/bigscreen-sdk/focus';
-
-export interface IModal extends IFocusable {}
+import { IFocusable } from '@24i/bigscreen-sdk/focus';
+
+export interface IModal extends IFocusable {}

package/packages/modal-service/src/ModalService.scss

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

package/packages/modal-service/src/ModalService.styles.1080.scss

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

package/packages/modal-service/src/ModalService.styles.scss

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