@alfalab/core-components-gallery 5.7.4 → 5.8.0

package/src/context.ts

@@ -4,13 +4,20 @@ import SwiperCore from 'swiper';
 import { GalleryImage, ImageMeta } from './types';
 
 export type GalleryContext = {
+    view: 'desktop' | 'mobile';
     singleSlide: boolean;
     currentSlideIndex: number;
     images: GalleryImage[];
     imagesMeta: ImageMeta[];
     fullScreen: boolean;
+    mutedVideo: boolean;
+    playingVideo: boolean;
+    hideNavigation: boolean;
+    setHideNavigation: (hideNavigation: boolean) => void;
     initialSlide: number;
     setFullScreen: (fullScreen: boolean) => void;
+    setMutedVideo: (muteVideo: boolean) => void;
+    setPlayingVideo: (playingVideo: boolean) => void;
     setImageMeta: (meta: ImageMeta, index: number) => void;
     slideTo: (index: number) => void;
     slideNext: () => void;
@@ -27,11 +34,18 @@ const mockFn = () => undefined;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export const GalleryContext = createContext<GalleryContext>({
+    view: 'desktop',
     singleSlide: false,
     currentSlideIndex: 0,
     images: [],
     imagesMeta: [],
     fullScreen: false,
+    mutedVideo: false,
+    playingVideo: false,
+    hideNavigation: false,
+    setHideNavigation: mockFn,
+    setMutedVideo: mockFn,
+    setPlayingVideo: mockFn,
     initialSlide: 0,
     setFullScreen: mockFn,
     setImageMeta: mockFn,

package/src/index.module.css

@@ -1,6 +1,8 @@
 @import '@alfalab/core-components-vars/src/index.css';
 
 .container {
+    position: relative;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -11,7 +13,21 @@
 
 .modal {
     flex-grow: 1;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     background: transparent;
 }
+
+.navigationVideo {
+    background-color: var(--color-static-neutral-0-inverted);
+    z-index: 3;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transition: transform 0.3s ease-in-out;
+}
+
+.hideNavigation {
+    transform: translateY(106px);
+}

package/src/index.ts

@@ -1,2 +1,2 @@
 export * from './Component';
-export * from './utils';
+export { GALLERY_EVENTS, TestIds } from './utils';

package/src/types.ts

@@ -1,3 +1,5 @@
+import { RefObject } from 'react';
+
 export type GalleryImage = {
     src: string;
     name?: string;
@@ -6,8 +8,16 @@ export type GalleryImage = {
     canDownload?: boolean;
 };
 
-export type ImageMeta = {
-    width: number;
-    height: number;
-    broken?: boolean;
-};
+export type ImageMeta =
+    | {
+          width: number;
+          height: number;
+          broken?: boolean;
+          player?: never;
+      }
+    | {
+          width?: never;
+          height?: never;
+          broken?: boolean;
+          player: RefObject<HTMLVideoElement>;
+      };

package/src/utils/constants.ts

@@ -7,4 +7,21 @@ export const TestIds = {
     EXIT_FULLSCREEN_BUTTON: 'exit-fullscreen-button',
     DOWNLOAD_BUTTON: 'download-button',
     NAVIGATION_BAR: 'navigation-bar',
+    MUTE_BUTTON: 'mute-button',
+    UNMUTE_BUTTON: 'unmute-button',
+};
+
+export const PREVIEW_WIDTH_MOBILE = 36;
+export const PREVIEW_HEIGHT_MOBILE = 46;
+
+export const PREVIEW_WIDTH_DESKTOP = 56;
+export const PREVIEW_HEIGHT_DESKTOP = 56;
+
+export const PREVIEW_VIDEO_MULTIPLIER = 12;
+
+export const GALLERY_EVENTS = {
+    ON_PLAY: 'Gallery:OnPlay',
+    ON_PAUSE: 'Gallery:OnPause',
+    ON_MUTE: 'Gallery:OnMute',
+    ON_UNMUTE: 'Gallery:OnUnmute',
 };

package/src/utils/utils.ts

@@ -10,9 +10,11 @@ export const getImageAlt = ({ alt, name }: GalleryImage, index: number): string
     alt || name || `Изображение ${index + 1}`;
 
 export const isSmallImage = (meta?: ImageMeta) => {
-    if (!meta) {
-        return false;
+    if (meta && meta.width && meta.height) {
+        return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;
     }
 
-    return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;
+    return false;
 };
+
+export const isVideo = (url: string | undefined) => /(.*?)(\.webm|\.mp4|\.m3u8)$/.test(url ?? '');

package/types.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 type GalleryImage = {
     src: string;
     name?: string;
@@ -9,5 +10,11 @@ type ImageMeta = {
     width: number;
     height: number;
     broken?: boolean;
+    player?: never;
+} | {
+    width?: never;
+    height?: never;
+    broken?: boolean;
+    player: RefObject<HTMLVideoElement>;
 };
 export { GalleryImage, ImageMeta };

package/utils/constants.d.ts

@@ -7,5 +7,18 @@ declare const TestIds: {
     EXIT_FULLSCREEN_BUTTON: string;
     DOWNLOAD_BUTTON: string;
     NAVIGATION_BAR: string;
+    MUTE_BUTTON: string;
+    UNMUTE_BUTTON: string;
 };
-export { TestIds };
+declare const PREVIEW_WIDTH_MOBILE = 36;
+declare const PREVIEW_HEIGHT_MOBILE = 46;
+declare const PREVIEW_WIDTH_DESKTOP = 56;
+declare const PREVIEW_HEIGHT_DESKTOP = 56;
+declare const PREVIEW_VIDEO_MULTIPLIER = 12;
+declare const GALLERY_EVENTS: {
+    ON_PLAY: string;
+    ON_PAUSE: string;
+    ON_MUTE: string;
+    ON_UNMUTE: string;
+};
+export { TestIds, PREVIEW_WIDTH_MOBILE, PREVIEW_HEIGHT_MOBILE, PREVIEW_WIDTH_DESKTOP, PREVIEW_HEIGHT_DESKTOP, PREVIEW_VIDEO_MULTIPLIER, GALLERY_EVENTS };

package/utils/constants.js

@@ -11,6 +11,25 @@ var TestIds = {
     EXIT_FULLSCREEN_BUTTON: 'exit-fullscreen-button',
     DOWNLOAD_BUTTON: 'download-button',
     NAVIGATION_BAR: 'navigation-bar',
+    MUTE_BUTTON: 'mute-button',
+    UNMUTE_BUTTON: 'unmute-button',
+};
+var PREVIEW_WIDTH_MOBILE = 36;
+var PREVIEW_HEIGHT_MOBILE = 46;
+var PREVIEW_WIDTH_DESKTOP = 56;
+var PREVIEW_HEIGHT_DESKTOP = 56;
+var PREVIEW_VIDEO_MULTIPLIER = 12;
+var GALLERY_EVENTS = {
+    ON_PLAY: 'Gallery:OnPlay',
+    ON_PAUSE: 'Gallery:OnPause',
+    ON_MUTE: 'Gallery:OnMute',
+    ON_UNMUTE: 'Gallery:OnUnmute',
 };
 
+exports.GALLERY_EVENTS = GALLERY_EVENTS;
+exports.PREVIEW_HEIGHT_DESKTOP = PREVIEW_HEIGHT_DESKTOP;
+exports.PREVIEW_HEIGHT_MOBILE = PREVIEW_HEIGHT_MOBILE;
+exports.PREVIEW_VIDEO_MULTIPLIER = PREVIEW_VIDEO_MULTIPLIER;
+exports.PREVIEW_WIDTH_DESKTOP = PREVIEW_WIDTH_DESKTOP;
+exports.PREVIEW_WIDTH_MOBILE = PREVIEW_WIDTH_MOBILE;
 exports.TestIds = TestIds;

package/utils/index.js

@@ -14,4 +14,11 @@ exports.PLACEHOLDER_WIDTH = utils_utils.PLACEHOLDER_WIDTH;
 exports.getImageAlt = utils_utils.getImageAlt;
 exports.getImageKey = utils_utils.getImageKey;
 exports.isSmallImage = utils_utils.isSmallImage;
+exports.isVideo = utils_utils.isVideo;
+exports.GALLERY_EVENTS = utils_constants.GALLERY_EVENTS;
+exports.PREVIEW_HEIGHT_DESKTOP = utils_constants.PREVIEW_HEIGHT_DESKTOP;
+exports.PREVIEW_HEIGHT_MOBILE = utils_constants.PREVIEW_HEIGHT_MOBILE;
+exports.PREVIEW_VIDEO_MULTIPLIER = utils_constants.PREVIEW_VIDEO_MULTIPLIER;
+exports.PREVIEW_WIDTH_DESKTOP = utils_constants.PREVIEW_WIDTH_DESKTOP;
+exports.PREVIEW_WIDTH_MOBILE = utils_constants.PREVIEW_WIDTH_MOBILE;
 exports.TestIds = utils_constants.TestIds;

package/utils/utils.d.ts

@@ -4,4 +4,5 @@ declare const PLACEHOLDER_HEIGHT = 300;
 declare const getImageKey: ({ name, src }: GalleryImage, index: number) => string;
 declare const getImageAlt: ({ alt, name }: GalleryImage, index: number) => string;
 declare const isSmallImage: (meta?: ImageMeta) => boolean;
-export { PLACEHOLDER_WIDTH, PLACEHOLDER_HEIGHT, getImageKey, getImageAlt, isSmallImage };
+declare const isVideo: (url: string | undefined) => boolean;
+export { PLACEHOLDER_WIDTH, PLACEHOLDER_HEIGHT, getImageKey, getImageAlt, isSmallImage, isVideo };

package/utils/utils.js

@@ -13,14 +13,16 @@ var getImageAlt = function (_a, index) {
     return alt || name || "\u0418\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 ".concat(index + 1);
 };
 var isSmallImage = function (meta) {
-    if (!meta) {
-        return false;
+    if (meta && meta.width && meta.height) {
+        return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;
     }
-    return meta.width < PLACEHOLDER_WIDTH && meta.height < PLACEHOLDER_HEIGHT;
+    return false;
 };
+var isVideo = function (url) { return /(.*?)(\.webm|\.mp4|\.m3u8)$/.test(url !== null && url !== void 0 ? url : ''); };
 
 exports.PLACEHOLDER_HEIGHT = PLACEHOLDER_HEIGHT;
 exports.PLACEHOLDER_WIDTH = PLACEHOLDER_WIDTH;
 exports.getImageAlt = getImageAlt;
 exports.getImageKey = getImageKey;
 exports.isSmallImage = isSmallImage;
+exports.isVideo = isVideo;

package/buttons-ec113bb4.js

@@ -1,37 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
-var desktop = require('@alfalab/core-components-tooltip/desktop');
-var ArrowsInwardMIcon = require('@alfalab/icons-glyph/ArrowsInwardMIcon');
-var ArrowsOutwardMIcon = require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
-var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
-var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var styles = {"header":"gallery__header_1eyvr","buttons":"gallery__buttons_1eyvr","iconButton":"gallery__iconButton_1eyvr"};
-require('./components/header/index.css')
-
-var Fullscreen = function (_a) {
-    var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
-    return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon.ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton }))));
-};
-var ExitFullscreen = function (_a) {
-    var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
-    return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon.ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton }))));
-};
-var Download = function (props) { return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: PointerDownMIcon.PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })))); };
-var Exit = function (props) { return (React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }))); };
-
-exports.Download = Download;
-exports.Exit = Exit;
-exports.ExitFullscreen = ExitFullscreen;
-exports.Fullscreen = Fullscreen;
-exports.styles = styles;

package/components/header/buttons.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('tslib');
-require('react');
-require('@alfalab/core-components-icon-button');
-require('@alfalab/core-components-tooltip/desktop');
-require('@alfalab/icons-glyph/ArrowsInwardMIcon');
-require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
-require('@alfalab/icons-glyph/CrossMIcon');
-require('@alfalab/icons-glyph/PointerDownMIcon');
-var components_header_buttons = require('../../buttons-ec113bb4.js');
-
-
-
-exports.Download = components_header_buttons.Download;
-exports.Exit = components_header_buttons.Exit;
-exports.ExitFullscreen = components_header_buttons.ExitFullscreen;
-exports.Fullscreen = components_header_buttons.Fullscreen;

package/cssm/components/header/buttons.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var React = require('react');
-var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
-var desktop = require('@alfalab/core-components-tooltip/cssm/desktop');
-var ArrowsInwardMIcon = require('@alfalab/icons-glyph/ArrowsInwardMIcon');
-var ArrowsOutwardMIcon = require('@alfalab/icons-glyph/ArrowsOutwardMIcon');
-var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
-var PointerDownMIcon = require('@alfalab/icons-glyph/PointerDownMIcon');
-var styles = require('./index.module.css');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
-
-var Fullscreen = function (_a) {
-    var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
-    return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon.ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles__default.default.iconButton }))));
-};
-var ExitFullscreen = function (_a) {
-    var buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["buttonRef"]);
-    return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-        React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon.ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles__default.default.iconButton }))));
-};
-var Download = function (props) { return (React__default.default.createElement(desktop.TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: PointerDownMIcon.PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles__default.default.iconButton })))); };
-var Exit = function (props) { return (React__default.default.createElement(coreComponentsIconButton.IconButton, tslib.__assign({}, props, { icon: CrossMIcon.CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles__default.default.iconButton }))); };
-
-exports.Download = Download;
-exports.Exit = Exit;
-exports.ExitFullscreen = ExitFullscreen;
-exports.Fullscreen = Fullscreen;

package/esm/buttons-791da71e.js

@@ -1,27 +0,0 @@
-import { __rest, __assign } from 'tslib';
-import React from 'react';
-import { IconButton } from '@alfalab/core-components-icon-button/esm';
-import { TooltipDesktop } from '@alfalab/core-components-tooltip/esm/desktop';
-import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
-
-var styles = {"header":"gallery__header_1eyvr","buttons":"gallery__buttons_1eyvr","iconButton":"gallery__iconButton_1eyvr"};
-require('./components/header/index.css')
-
-var Fullscreen = function (_a) {
-    var buttonRef = _a.buttonRef, restProps = __rest(_a, ["buttonRef"]);
-    return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-        React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton }))));
-};
-var ExitFullscreen = function (_a) {
-    var buttonRef = _a.buttonRef, restProps = __rest(_a, ["buttonRef"]);
-    return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-        React.createElement(IconButton, __assign({}, restProps, { ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton }))));
-};
-var Download = function (props) { return (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, __assign({}, props, { icon: PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })))); };
-var Exit = function (props) { return (React.createElement(IconButton, __assign({}, props, { icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }))); };
-
-export { Download as D, Exit as E, Fullscreen as F, ExitFullscreen as a, styles as s };

package/esm/components/header/buttons.js

@@ -1,9 +0,0 @@
-import 'tslib';
-import 'react';
-import '@alfalab/core-components-icon-button/esm';
-import '@alfalab/core-components-tooltip/esm/desktop';
-import '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '@alfalab/icons-glyph/PointerDownMIcon';
-export { D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-791da71e.js';

package/modern/buttons-1859cb8e.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IconButton } from '@alfalab/core-components-icon-button/modern';
-import { TooltipDesktop } from '@alfalab/core-components-tooltip/modern/desktop';
-import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
-
-const styles = {"header":"gallery__header_1eyvr","buttons":"gallery__buttons_1eyvr","iconButton":"gallery__iconButton_1eyvr"};
-require('./components/header/index.css')
-
-const Fullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
-const ExitFullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
-const Download = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
-const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
-
-export { Download as D, Exit as E, Fullscreen as F, ExitFullscreen as a, styles as s };

package/modern/components/header/buttons.js

@@ -1,8 +0,0 @@
-import 'react';
-import '@alfalab/core-components-icon-button/modern';
-import '@alfalab/core-components-tooltip/modern/desktop';
-import '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '@alfalab/icons-glyph/PointerDownMIcon';
-export { D as Download, E as Exit, a as ExitFullscreen, F as Fullscreen } from '../../buttons-1859cb8e.js';

package/moderncssm/components/header/buttons.d.ts

@@ -1,11 +0,0 @@
-import { FC, MutableRefObject } from 'react';
-import { IconButtonProps } from "@alfalab/core-components-icon-button";
-type Props = Omit<IconButtonProps, 'icon' | 'colors'> & {
-    buttonRef?: MutableRefObject<HTMLButtonElement | null>;
-    download?: string | boolean;
-};
-declare const Fullscreen: FC<Props>;
-declare const ExitFullscreen: FC<Props>;
-declare const Download: FC<Props>;
-declare const Exit: FC<Props>;
-export { Fullscreen, ExitFullscreen, Download, Exit };

package/moderncssm/components/header/buttons.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { IconButton } from '@alfalab/core-components-icon-button/moderncssm';
-import { TooltipDesktop } from '@alfalab/core-components-tooltip/moderncssm/desktop';
-import { ArrowsInwardMIcon } from '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import { ArrowsOutwardMIcon } from '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { PointerDownMIcon } from '@alfalab/icons-glyph/PointerDownMIcon';
-import styles from './index.module.css';
-
-const Fullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsOutwardMIcon, colors: 'inverted', "aria-label": '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u043C \u0440\u0435\u0436\u0438\u043C\u0435', className: styles.iconButton })));
-const ExitFullscreen = ({ buttonRef, ...restProps }) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...restProps, ref: buttonRef, icon: ArrowsInwardMIcon, colors: 'inverted', "aria-label": '\u0412\u044B\u0439\u0442\u0438 \u0438\u0437 \u043F\u043E\u043B\u043D\u043E\u044D\u043A\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0440\u0435\u0436\u0438\u043C\u0430', className: styles.iconButton })));
-const Download = (props) => (React.createElement(TooltipDesktop, { trigger: 'hover', position: 'bottom', content: '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', fallbackPlacements: ['bottom-end'] },
-    React.createElement(IconButton, { ...props, icon: PointerDownMIcon, colors: 'inverted', "aria-label": '\u0421\u043A\u0430\u0447\u0430\u0442\u044C', className: styles.iconButton })));
-const Exit = (props) => (React.createElement(IconButton, { ...props, icon: CrossMIcon, colors: 'inverted', "aria-label": '\u0417\u0430\u043A\u0440\u044B\u0442\u044C', className: styles.iconButton }));
-
-export { Download, Exit, ExitFullscreen, Fullscreen };