@dilicorp/ui 0.2.31 → 0.2.33

package/dist/index.d.ts

@@ -14,7 +14,6 @@ export * from './atoms/separator';
 export * from './atoms/spinner';
 export * from './atoms/typography';
 export * from './atoms/skeleton';
-export * from './atoms/panel/panel';
 export * from './atoms/pluxee-icon/pluxee-icon';
 export * from './molecules/alert';
 export * from './molecules/breadcrumb';
@@ -23,6 +22,10 @@ export * from './molecules/dropdown/dropdown';
 export * from './molecules/field';
 export * from './molecules/paginate';
 export * from './molecules/table';
+export * from './molecules/panel/panel';
+export * from './molecules/card-summary/card-summary';
+export * from './molecules/modal/modal';
+export * from './molecules/player-video/player-video';
 export * from './components/form-builder/form-builder';
 export * from './components/side-navigation-bar/side-navigation-bar';
 export * from './components/navbar/navbar';
@@ -34,7 +37,6 @@ export { Accordion } from './components/accordion/accordion';
 export { AccordionItem } from './components/accordion/accordion-item';
 export { AccordionHeader } from './components/accordion/accordion-header';
 export { AccordionBody } from './components/accordion/accordion-body';
-export * from './components/modal/modal';
 export * from './components/layout/layout';
 export { AlertProvider } from './components/alert-template/alert-provider';
 export { AlertTemplate, AlertTemplateProps } from './components/alert-template/alert-template';
@@ -55,4 +57,5 @@ export { default as validationsHelper } from './utils/validations-helper';
 export { default as windowsHelper } from './utils/window-helper';
 export * from './components/layout/pluxee-logo/pluxee-logo';
 export * from './components/layout/pluxee-logo/pluxee-logo-inverted';
+export * from './components/layout/pluxee-logo/pluxee-logo-card';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -15,7 +15,6 @@ export * from './atoms/separator';
 export * from './atoms/spinner';
 export * from './atoms/typography';
 export * from './atoms/skeleton';
-export * from './atoms/panel/panel';
 export * from './atoms/pluxee-icon/pluxee-icon';
 // Molecules
 export * from './molecules/alert';
@@ -25,6 +24,10 @@ export * from './molecules/dropdown/dropdown';
 export * from './molecules/field';
 export * from './molecules/paginate';
 export * from './molecules/table';
+export * from './molecules/panel/panel';
+export * from './molecules/card-summary/card-summary';
+export * from './molecules/modal/modal';
+export * from './molecules/player-video/player-video';
 // Components
 export * from './components/form-builder/form-builder';
 export * from './components/side-navigation-bar/side-navigation-bar';
@@ -37,7 +40,6 @@ export { Accordion } from './components/accordion/accordion';
 export { AccordionItem } from './components/accordion/accordion-item';
 export { AccordionHeader } from './components/accordion/accordion-header';
 export { AccordionBody } from './components/accordion/accordion-body';
-export * from './components/modal/modal';
 export * from './components/layout/layout';
 export { AlertProvider } from './components/alert-template/alert-provider';
 export { AlertTemplate } from './components/alert-template/alert-template';
@@ -61,3 +63,4 @@ export { default as windowsHelper } from './utils/window-helper';
 // Images
 export * from './components/layout/pluxee-logo/pluxee-logo';
 export * from './components/layout/pluxee-logo/pluxee-logo-inverted';
+export * from './components/layout/pluxee-logo/pluxee-logo-card';

package/dist/molecules/card-summary/card-summary-body.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type CardSummaryBodyProps = {
+    label: string | ReactNode;
+    labelClass?: string;
+    href?: string;
+};
+export declare const CardSummaryBody: {
+    ({ label, href, labelClass }: CardSummaryBodyProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-body.d.ts.map

package/dist/molecules/card-summary/card-summary-body.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+export const CardSummaryBody = ({ label, href, labelClass = 'fs-2' }) => {
+    return (React.createElement("div", { className: "dash-body" }, href
+        ? (React.createElement(Link, { className: "normal-link", to: href },
+            React.createElement("div", { className: `value ${labelClass}` }, label)))
+        : (React.createElement("div", { className: `value ${labelClass}` }, label))));
+};
+CardSummaryBody.displayName = 'CardSummaryBody';

package/dist/molecules/card-summary/card-summary-container.d.ts

@@ -0,0 +1,14 @@
+import { HtmlHTMLAttributes, ReactNode } from 'react';
+import { SkeletonProps } from 'react-loading-skeleton';
+declare type CardSummaryContainerProps = {
+    children: ReactNode;
+    loading?: boolean;
+    skeleton?: SkeletonProps;
+    color?: 'primary' | 'primary-contrast' | 'success' | 'default';
+} & HtmlHTMLAttributes<HTMLDivElement>;
+export declare const CardSummaryContainer: {
+    ({ children, className, loading, color, skeleton }: CardSummaryContainerProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-container.d.ts.map

package/dist/molecules/card-summary/card-summary-container.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Skeleton } from '../../atoms/skeleton';
+import classNames from 'classnames';
+export const CardSummaryContainer = ({ children, className, loading, color = 'primary-contrast', skeleton = {
+    height: 188,
+    count: 1,
+    duration: 0.9,
+    containerClassName: 'col',
+    style: {
+        marginTop: 32, marginBottom: '2rem'
+    }
+} }) => {
+    if (loading) {
+        return React.createElement(Skeleton, Object.assign({}, skeleton));
+    }
+    const classes = classNames(`dashboard-card-item ${color}`, className);
+    return (React.createElement("div", { className: classes }, children));
+};
+CardSummaryContainer.displayName = 'CardSummaryContainer';

package/dist/molecules/card-summary/card-summary-footer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type CardSummaryFooterProps = {
+    label: string;
+    href?: string;
+    button?: {
+        label: string;
+        href: string;
+    };
+};
+export declare const CardSummaryFooter: {
+    ({ label, href, button }: CardSummaryFooterProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-footer.d.ts.map

package/dist/molecules/card-summary/card-summary-footer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '../../atoms/button';
+export const CardSummaryFooter = ({ label, href, button }) => {
+    return (React.createElement("div", { className: "dash-footer" },
+        href
+            ? (React.createElement(Link, { className: "normal-link", to: href }, label))
+            : React.createElement(React.Fragment, null, label),
+        button && React.createElement(Button, { small: true, href: button.href }, button.label)));
+};
+CardSummaryFooter.displayName = 'CardSummaryFooter';

package/dist/molecules/card-summary/card-summary-header.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type CardSummaryHeaderProps = {
+    label: string;
+    href?: string;
+    className?: string;
+};
+export declare const CardSummaryHeader: {
+    ({ label, href, className }: CardSummaryHeaderProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=card-summary-header.d.ts.map

package/dist/molecules/card-summary/card-summary-header.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+export const CardSummaryHeader = ({ label, href, className }) => {
+    const classes = classNames('dash-title', className);
+    return (React.createElement("div", { className: "dash-header" }, href
+        ? (React.createElement(Link, { className: "normal-link", to: href },
+            React.createElement("div", { className: classes }, label)))
+        : (React.createElement("div", { className: classes }, label))));
+};
+CardSummaryHeader.displayName = 'CardSummaryHeader';

package/dist/molecules/card-summary/card-summary.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+export declare const CardSummary: {
+    Container: {
+        ({ children, className, loading, color, skeleton }: {
+            children: import("react").ReactNode;
+            loading?: boolean | undefined;
+            skeleton?: import("react-loading-skeleton").SkeletonProps | undefined;
+            color?: "primary" | "success" | "default" | "primary-contrast" | undefined;
+        } & import("react").HtmlHTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Header: {
+        ({ label, href, className }: {
+            label: string;
+            href?: string | undefined;
+            className?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ label, href, labelClass }: {
+            label: import("react").ReactNode;
+            labelClass?: string | undefined;
+            href?: string | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ label, href, button }: {
+            label: string;
+            href?: string | undefined;
+            button?: {
+                label: string;
+                href: string;
+            } | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=card-summary.d.ts.map

package/dist/molecules/card-summary/card-summary.js

@@ -0,0 +1,10 @@
+import { CardSummaryBody } from './card-summary-body';
+import { CardSummaryContainer } from './card-summary-container';
+import { CardSummaryFooter } from './card-summary-footer';
+import { CardSummaryHeader } from './card-summary-header';
+export const CardSummary = {
+    Container: CardSummaryContainer,
+    Header: CardSummaryHeader,
+    Body: CardSummaryBody,
+    Footer: CardSummaryFooter
+};

package/dist/molecules/modal/modal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AlertRef } from '../../molecules/alert';
+export declare type ModalProps = {
+    children: React.ReactNode;
+    title?: string;
+    closeFn?: () => void;
+    className?: string;
+    innerRef?: React.ForwardedRef<AlertRef>;
+};
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<AlertRef>>;
+//# sourceMappingURL=modal.d.ts.map

package/dist/molecules/modal/modal.js

@@ -0,0 +1,15 @@
+import React, { forwardRef } from 'react';
+import { Button } from '../../atoms/button';
+import { Alert } from '../../molecules/alert';
+import classNames from 'classnames';
+export const Modal = forwardRef((props, ref) => {
+    const { children, title, closeFn, className, innerRef } = props;
+    const classes = classNames(className !== null && className !== void 0 ? className : 'alert-small');
+    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
+        React.createElement("div", { className: "modal modal-sm" },
+            React.createElement("div", { className: "modal-header" },
+                React.createElement("div", { className: "title" }, title),
+                React.createElement(Button, { small: true, onClick: closeFn }, "\u00D7")),
+            React.createElement("div", { className: "modal-body" }, children))));
+});
+Modal.displayName = 'Modal';

package/dist/molecules/panel/panel-container.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type PanelContainerProps = {
+    children: React.ReactNode;
+    type?: 'row' | 'flex';
+    containerClassName?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const PanelContainer: {
+    ({ children, className, type, containerClassName }: PanelContainerProps): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=panel-container.d.ts.map

package/dist/molecules/panel/panel-container.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import classNames from 'classnames';
+export const PanelContainer = ({ children, className, type = 'row', containerClassName }) => {
+    const classes = classNames(className, type === 'row' ? 'row' : 'd-flex');
+    const classesContainer = classNames(containerClassName, 'panel-container');
+    return (React.createElement("div", { className: classesContainer },
+        React.createElement("div", { className: classes }, children)));
+};
+PanelContainer.displayName = 'PanelContainer';

package/dist/molecules/panel/panel-field.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type PanelFieldProps = {
+    label: string;
+    value?: React.ReactNode;
+    forceShow?: boolean;
+};
+export declare const PanelField: {
+    ({ label, value, forceShow }: PanelFieldProps): JSX.Element | null;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=panel-field.d.ts.map

package/dist/molecules/panel/panel-field.js

@@ -0,0 +1,12 @@
+import React from 'react';
+export const PanelField = ({ label, value, forceShow = true }) => {
+    if (!forceShow && !value)
+        return null;
+    return (React.createElement("div", { className: "panel-field" },
+        label ? React.createElement(React.Fragment, null,
+            label,
+            ":") : '',
+        " ",
+        React.createElement("strong", null, value)));
+};
+PanelField.displayName = 'PanelField';

package/dist/molecules/panel/panel-group.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ColProps } from '../../atoms/col';
+declare type Props = {
+    label?: string;
+    value?: React.ReactNode | string;
+    big?: boolean;
+    upper?: boolean;
+} & ColProps;
+export declare const PanelGroup: {
+    ({ value, label, size, big, upper }: Props): JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=panel-group.d.ts.map

package/dist/molecules/panel/panel-group.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Col } from '../../atoms/col';
+export const PanelGroup = ({ value, label, size = [12, 6], big = false, upper = true }) => {
+    return (React.createElement(Col, { size: size },
+        React.createElement("div", { className: "panel-group" },
+            React.createElement("label", null, label),
+            React.createElement("div", { className: `${upper ? ' upper' : ''} text${big ? ' big' : ''}` }, value || '-'))));
+};
+PanelGroup.displayName = 'PanelGroup';

package/dist/molecules/panel/panel.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const Panel: {
+    Container: {
+        ({ children, className, type, containerClassName }: {
+            children: import("react").ReactNode;
+            type?: "row" | "flex" | undefined;
+            containerClassName?: string | undefined;
+        } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ value, label, size, big, upper }: {
+            label?: string | undefined;
+            value?: import("react").ReactNode;
+            big?: boolean | undefined;
+            upper?: boolean | undefined;
+        } & {
+            size?: boolean | ("none" | 1 | 2 | 3 | 4 | 5 | "auto" | 6 | 7 | 8 | 9 | 10 | 11 | 12) | ("none" | 1 | 2 | 3 | 4 | 5 | "auto" | 6 | 7 | 8 | 9 | 10 | 11 | 12)[] | undefined;
+        } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Field: {
+        ({ label, value, forceShow }: {
+            label: string;
+            value?: import("react").ReactNode;
+            forceShow?: boolean | undefined;
+        }): JSX.Element | null;
+        displayName: string;
+    };
+};
+//# sourceMappingURL=panel.d.ts.map

package/dist/molecules/panel/panel.js

@@ -0,0 +1,8 @@
+import { PanelContainer } from './panel-container';
+import { PanelField } from './panel-field';
+import { PanelGroup } from './panel-group';
+export const Panel = {
+    Container: PanelContainer,
+    Group: PanelGroup,
+    Field: PanelField
+};

package/dist/molecules/player-video/modal-video.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { AlertRef } from '../alert';
+declare type SourceType = {
+    src: string;
+    type: 'mp4' | 'ogg' | 'webm';
+};
+declare type SubtitleType = {
+    src: string;
+    lang: string;
+    label: string;
+};
+declare type ModalVideoProps = {
+    closeFn?: () => void;
+    className?: string;
+    innerRef?: React.ForwardedRef<AlertRef>;
+    sources: SourceType[];
+    subtitles?: SubtitleType[];
+    autoplay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+};
+export declare const ModalVideo: React.ForwardRefExoticComponent<ModalVideoProps & React.RefAttributes<AlertRef>>;
+export {};
+//# sourceMappingURL=modal-video.d.ts.map

package/dist/molecules/player-video/modal-video.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import { Alert } from '../alert';
+import classNames from 'classnames';
+import { Icon } from '../../atoms/icon';
+export const ModalVideo = forwardRef((props, ref) => {
+    const { closeFn, className, innerRef, sources, subtitles, autoplay = true, muted = true, controls = true } = props;
+    const classes = classNames(className);
+    return (React.createElement(Alert, { ref: ref !== null && ref !== void 0 ? ref : innerRef, className: classes },
+        React.createElement("div", { className: "modal" },
+            React.createElement("div", { className: "d-flex justify-content-end container-player-close" },
+                React.createElement("button", { className: "button-player-close", onClick: closeFn },
+                    React.createElement(Icon, { pluxee: true, icon: "fa-delete", size: "lg" }))),
+            React.createElement("div", { className: "modal-body" },
+                React.createElement("video", { className: "player-video-src", controls: controls, autoPlay: autoplay, muted: muted },
+                    sources && sources.map(item => React.createElement("source", { key: item.src, src: item.src, type: `video/${item.type}` })),
+                    subtitles && subtitles.map(item => React.createElement("track", { key: item.src, src: item.src, kind: "subtitles", srcLang: item.lang, label: item.label })))))));
+});
+ModalVideo.displayName = 'ModalVideo';

package/dist/molecules/player-video/player-video.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export * from './thumb-video';
+export * from './modal-video';
+export declare const PlayerVideo: {
+    Modal: import("react").ForwardRefExoticComponent<{
+        closeFn?: (() => void) | undefined;
+        className?: string | undefined;
+        innerRef?: import("react").ForwardedRef<import("../alert").AlertRef> | undefined;
+        sources: {
+            src: string;
+            type: "mp4" | "ogg" | "webm";
+        }[];
+        subtitles?: {
+            src: string;
+            lang: string;
+            label: string;
+        }[] | undefined;
+        autoplay?: boolean | undefined;
+        muted?: boolean | undefined;
+        controls?: boolean | undefined;
+    } & import("react").RefAttributes<import("../alert").AlertRef>>;
+    Thumb: ({ thumbSrc, width, height, className, onClick, children }: {
+        thumbSrc: string;
+        onClick?: (() => void) | undefined;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+        className?: string | undefined;
+        children?: import("react").ReactNode;
+    }) => JSX.Element;
+};
+//# sourceMappingURL=player-video.d.ts.map

package/dist/molecules/player-video/player-video.js

@@ -0,0 +1,8 @@
+import { ModalVideo } from './modal-video';
+import { ThumbVideo } from './thumb-video';
+export * from './thumb-video';
+export * from './modal-video';
+export const PlayerVideo = {
+    Modal: ModalVideo,
+    Thumb: ThumbVideo
+};

package/dist/molecules/player-video/thumb-video.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare type ThumbVideoProps = {
+    thumbSrc: string;
+    onClick?: () => void;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const ThumbVideo: ({ thumbSrc, width, height, className, onClick, children }: ThumbVideoProps) => JSX.Element;
+export {};
+//# sourceMappingURL=thumb-video.d.ts.map

package/dist/molecules/player-video/thumb-video.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon } from '../../atoms/icon';
+export const ThumbVideo = ({ thumbSrc, width = 250, height = 'auto', className, onClick, children }) => {
+    const classes = classNames(className, 'btn-thumb');
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { className: classes, onClick: onClick },
+            React.createElement(Icon, { icon: "fa-play", pluxee: true, size: "lg" }),
+            React.createElement("img", { className: "img-thumb", src: thumbSrc, width: width, height: height })),
+        children));
+};

package/dist/molecules/table-column-management.js

@@ -41,12 +41,16 @@ export const TableColumnManagement = (props) => {
     };
     const childrenFiltered = React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
+            let invalids = 0;
             const childrenWithIndex = React.Children.map(child.props.children, (subChild, subIndex) => {
                 if (subChild === null || subChild === void 0 ? void 0 : subChild.props) {
-                    return (Object.assign(Object.assign({}, subChild), { props: Object.assign(Object.assign({}, subChild.props), { index: subIndex }) }));
+                    return (Object.assign(Object.assign({}, subChild), { props: Object.assign(Object.assign({}, subChild.props), { index: (subIndex - invalids) }) }));
+                }
+                else {
+                    invalids++;
                 }
             });
-            childrenWithIndex.sort((sortChildren));
+            childrenWithIndex.sort(sortChildren);
             const filteredChildren = React.Children.toArray(childrenWithIndex).filter(filterChildren);
             return (Object.assign(Object.assign({}, child), { props: Object.assign(Object.assign({}, child.props), { children: filteredChildren }) }));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilicorp/ui",
-  "version": "0.2.31",
+  "version": "0.2.33",
   "description": "A simple UI design for Dilicorp",
   "repository": {
     "type": "git",