sevago-library 1.4.7 → 1.4.8

package/dist/src/components/elements/image/image-gallery/elements/image-gallery-main.element.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ImageGalleryMainElementProps } from '../image-gallery.interface';
+export declare const ImageGalleryMainElement: FC<ImageGalleryMainElementProps>;

package/dist/src/components/elements/image/image-gallery/elements/image-gallery-navigation-button.element.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ImageGalleryNavigationButtonProps } from '../image-gallery.interface';
+export declare const ImageGalleryNavigationButtonElement: FC<ImageGalleryNavigationButtonProps>;

package/dist/src/components/elements/image/image-gallery/elements/image-gallery-thumbnail-list.element.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ImageGalleryThumbnailListElementProps } from '../image-gallery.interface';
+export declare const ImageGalleryThumbnailListElement: FC<ImageGalleryThumbnailListElementProps>;

package/dist/src/components/elements/image/image-gallery/elements/image-gallery-viewer.element.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ImageGalleryViewerElementProps } from '../image-gallery.interface';
+export declare const ImageGalleryViewerElement: FC<ImageGalleryViewerElementProps>;

package/dist/src/components/elements/image/image-gallery/image-gallery.argtypes.d.ts

@@ -0,0 +1,3 @@
+import { ArgTypes } from '@storybook/react';
+import { ImageGalleryElementProps } from './image-gallery.interface';
+export declare const imageGalleryArgTypes: Partial<ArgTypes<ImageGalleryElementProps>>;

package/dist/src/components/elements/image/image-gallery/image-gallery.constant.d.ts

@@ -0,0 +1,5 @@
+import { SxProps, Theme } from '@mui/material';
+import { ImageGalleryLabels } from './image-gallery.interface';
+export declare const IMAGE_GALLERY_DEFAULT_LABELS: ImageGalleryLabels;
+export declare const IMAGE_GALLERY_NAVIGATION_BUTTON_SX: SxProps<Theme>;
+export declare const IMAGE_GALLERY_COUNTER_SX: SxProps<Theme>;

package/dist/src/components/elements/image/image-gallery/image-gallery.element.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ImageGalleryElementProps } from './image-gallery.interface';
+export declare const ImageGalleryElement: FC<ImageGalleryElementProps>;

package/dist/src/components/elements/image/image-gallery/image-gallery.element.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ImageGalleryElement } from './image-gallery.element';
+declare const meta: Meta<typeof ImageGalleryElement>;
+export default meta;
+type Story = StoryObj<typeof ImageGalleryElement>;
+export declare const Default: Story;
+export declare const SingleImage: Story;
+export declare const CustomLayout: Story;
+export declare const Empty: Story;

package/dist/src/components/elements/image/image-gallery/image-gallery.interface.d.ts

@@ -0,0 +1,110 @@
+import { BoxProps, SxProps, Theme } from '@mui/material';
+import { CSSProperties, ReactNode, SyntheticEvent } from 'react';
+export interface ImageGalleryItemObject {
+    id?: string;
+    src: string;
+    thumbnailSrc?: string;
+    alt?: string;
+    title?: ReactNode;
+}
+export type ImageGalleryItem = string | ImageGalleryItemObject;
+export interface NormalizedImageGalleryItem {
+    id: string;
+    src: string;
+    thumbnailSrc: string;
+    alt: string;
+    title?: ReactNode;
+}
+export interface ImageGalleryLabels {
+    image: (index: number) => string;
+    selectImage: (index: number) => string;
+    previous: string;
+    next: string;
+    close: string;
+    counter: (current: number, total: number) => string;
+}
+export interface ImageGalleryElementProps extends BoxProps {
+    images: ImageGalleryItem[];
+    activeIndex?: number;
+    initialIndex?: number;
+    mainAspectRatio?: string | number;
+    objectFit?: CSSProperties['objectFit'];
+    thumbnailObjectFit?: CSSProperties['objectFit'];
+    thumbnailSize?: number | string;
+    showThumbnails?: boolean;
+    showPreviewNavigation?: boolean;
+    showViewerCounter?: boolean;
+    openOnMainClick?: boolean;
+    loop?: boolean;
+    fallbackSrc?: string;
+    activeColor?: string;
+    borderRadius?: string;
+    emptyContent?: ReactNode;
+    labels?: Partial<ImageGalleryLabels>;
+    mainSx?: SxProps<Theme>;
+    mainImageSx?: SxProps<Theme>;
+    thumbnailListSx?: SxProps<Theme>;
+    thumbnailSx?: SxProps<Theme>;
+    viewerPaperSx?: SxProps<Theme>;
+    viewerImageSx?: SxProps<Theme>;
+    onActiveIndexChange?: (index: number, image: NormalizedImageGalleryItem) => void;
+    onOpenViewer?: (index: number, image: NormalizedImageGalleryItem) => void;
+    onCloseViewer?: () => void;
+}
+export interface ImageGalleryNavigationButtonProps {
+    icon: string;
+    label: string;
+    disabled?: boolean;
+    sx?: SxProps<Theme>;
+    onClick: () => void;
+}
+export interface ImageGalleryImageErrorOptions {
+    fallbackSrc?: string;
+}
+export interface ImageGalleryMainElementProps {
+    selectedImage: NormalizedImageGalleryItem;
+    hasMultipleImages: boolean;
+    showPreviewNavigation: boolean;
+    openOnMainClick: boolean;
+    mainAspectRatio: string | number;
+    objectFit: CSSProperties['objectFit'];
+    activeColor: string;
+    canGoPrevious: boolean;
+    canGoNext: boolean;
+    labels: ImageGalleryLabels;
+    mainSx?: SxProps<Theme>;
+    mainImageSx?: SxProps<Theme>;
+    onImageError: (event: SyntheticEvent<HTMLImageElement>) => void;
+    onOpenViewer: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+}
+export interface ImageGalleryThumbnailListElementProps {
+    images: NormalizedImageGalleryItem[];
+    selectedIndex: number;
+    thumbnailSize: number | string;
+    thumbnailObjectFit: CSSProperties['objectFit'];
+    activeColor: string;
+    labels: ImageGalleryLabels;
+    thumbnailListSx?: SxProps<Theme>;
+    thumbnailSx?: SxProps<Theme>;
+    onSelectIndex: (index: number) => void;
+    onImageError: (event: SyntheticEvent<HTMLImageElement>) => void;
+}
+export interface ImageGalleryViewerElementProps {
+    open: boolean;
+    selectedImage: NormalizedImageGalleryItem;
+    selectedIndex: number;
+    imageCount: number;
+    hasMultipleImages: boolean;
+    showViewerCounter: boolean;
+    canGoPrevious: boolean;
+    canGoNext: boolean;
+    labels: ImageGalleryLabels;
+    viewerPaperSx?: SxProps<Theme>;
+    viewerImageSx?: SxProps<Theme>;
+    onImageError: (event: SyntheticEvent<HTMLImageElement>) => void;
+    onClose: () => void;
+    onPrevious: () => void;
+    onNext: () => void;
+}

package/dist/src/components/elements/image/image-gallery/image-gallery.util.d.ts

@@ -0,0 +1,8 @@
+import { SxProps, Theme } from '@mui/material';
+import { ImageGalleryItem, ImageGalleryLabels, NormalizedImageGalleryItem } from './image-gallery.interface';
+export declare const mergeImageGallerySx: (...sxList: Array<SxProps<Theme> | undefined>) => SxProps<Theme>;
+export declare const mergeImageGalleryLabels: (labels?: Partial<ImageGalleryLabels>) => ImageGalleryLabels;
+export declare const normalizeImageGalleryItem: (image: ImageGalleryItem, index: number, labels: ImageGalleryLabels) => NormalizedImageGalleryItem;
+export declare const clampImageGalleryIndex: (index: number | undefined, length: number) => number;
+export declare const getImageGalleryNavigationIndex: (selectedIndex: number, direction: -1 | 1, imageCount: number, loop: boolean) => number;
+export declare const toImageGalleryCssSize: (value: number | string) => string;

package/dist/src/components/elements/image/image-gallery/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image-gallery.element';
+export * from './image-gallery.interface';

package/dist/src/components/elements/image/index.d.ts

@@ -1,3 +1,4 @@
 export * from './image-content-caption/image-content-caption.component';
+export * from './image-gallery';
 export * from './image-name-time.component';
 export * from './image.element';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sevago-library",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "Sevago SSO Frontend Library - A comprehensive SSO solution with React components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",