josenanodev-react-components-library 1.0.4 → 1.0.5

package/dist/esm/components/ParallelSelectionList/ParallelSelectionList.js

@@ -1,142 +0,0 @@
-import React from "react";
-import { useState, useEffect, useRef } from "react";
-import "./ParallelSelectionList.css";
-//Icons
-import { BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight, BsSearch, } from "react-icons/bs";
-//Hooks
-import useResizeObserver from "../../hooks/useResizeObserver";
-const ParallelSelectionList = ({ dataList, applyAction, cancelAction, onSelectionChange, leftListTitle, rightListTitle, leftListApplyAllButtonText, rightListApplyAllButtonText, searchBarsVisible, applyButtonText, cancelButtonText, preSelectedDatumsIds = [], listElementsHeight = 50, }) => {
-    //Refs
-    const leftListRef = useRef(null);
-    const rightListRef = useRef(null);
-    //useState
-    const [selectedDatumsIds, setSelectedDatumsIds] = useState(preSelectedDatumsIds);
-    const [filteredLeftList, setFilteredLeftList] = useState([]);
-    const [filteredRightList, setFilteredRightList] = useState([]);
-    const [leftListFirstVisibleElementIndex, setLeftListFirstVisibleElementIndex] = useState(0);
-    const [leftListLastVisibleElementIndex, setLeftListLastVisibleElementIndex] = useState(0);
-    const [rightListFirstVisibleElementIndex, setRightListFirstVisibleElementIndex] = useState(0);
-    const [rightListLastVisibleElementIndex, setRightListLastVisibleElementIndex] = useState(0);
-    const [leftListSearchValue, setLeftListSearchValue] = useState("");
-    const [rightListSearchValue, setRightListSearchValue] = useState("");
-    //hooks
-    const [leftListWidth, leftListHeight] = useResizeObserver(leftListRef);
-    const [rightListWidth, rightListHeight] = useResizeObserver(rightListRef);
-    //Functions
-    const addToSelectedDatumsIds = (datumIdsArray) => {
-        const selectedDatumsIdsClone = [...selectedDatumsIds];
-        datumIdsArray.forEach((datumId) => {
-            if (!selectedDatumsIds.includes(datumId)) {
-                selectedDatumsIdsClone.push(datumId);
-            }
-        });
-        setSelectedDatumsIds(selectedDatumsIdsClone);
-    };
-    const removeFromSelectedDatumsIds = (datumIdsArray) => {
-        const selectedDatumsIdsClone = [...selectedDatumsIds];
-        datumIdsArray.forEach((datumId) => {
-            if (selectedDatumsIds.includes(datumId)) {
-                selectedDatumsIdsClone.splice(selectedDatumsIdsClone.indexOf(datumId), 1);
-            }
-        });
-        setSelectedDatumsIds(selectedDatumsIdsClone);
-    };
-    //useEffects
-    useEffect(() => {
-        let dataListClone = [...dataList];
-        dataListClone = dataListClone.filter((datum) => !selectedDatumsIds.includes(datum._id));
-        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(leftListSearchValue.toLowerCase()));
-        setFilteredLeftList(dataListClone);
-    }, [leftListSearchValue, dataList, selectedDatumsIds]);
-    useEffect(() => {
-        let dataListClone = [...dataList];
-        dataListClone = dataListClone.filter((datum) => selectedDatumsIds.includes(datum._id));
-        dataListClone = dataListClone.filter((datum) => datum.searchValue.toLowerCase().includes(rightListSearchValue.toLowerCase()));
-        setFilteredRightList(dataListClone);
-    }, [rightListSearchValue, dataList, selectedDatumsIds]);
-    useEffect(() => {
-        if (leftListRef.current && leftListRef.current.clientHeight !== 0) {
-            setLeftListLastVisibleElementIndex(leftListFirstVisibleElementIndex +
-                Math.floor(leftListRef.current.clientHeight / listElementsHeight) +
-                2);
-        }
-        else {
-            setLeftListLastVisibleElementIndex(filteredLeftList.length);
-        }
-    }, [
-        leftListHeight,
-        leftListWidth,
-        leftListFirstVisibleElementIndex,
-        listElementsHeight,
-        filteredLeftList.length,
-    ]);
-    useEffect(() => {
-        if (rightListRef.current && rightListRef.current.clientHeight !== 0) {
-            setRightListLastVisibleElementIndex(rightListFirstVisibleElementIndex +
-                Math.floor(rightListRef.current.clientHeight / listElementsHeight) +
-                2);
-        }
-        else {
-            setRightListLastVisibleElementIndex(filteredRightList.length);
-        }
-    }, [
-        rightListHeight,
-        rightListWidth,
-        rightListFirstVisibleElementIndex,
-        listElementsHeight,
-        filteredRightList.length,
-    ]);
-    useEffect(() => {
-        //I know what I am doing... maybe
-        if (onSelectionChange) {
-            onSelectionChange(selectedDatumsIds);
-        }
-        // eslint-disable-next-line
-    }, [selectedDatumsIds]);
-    return (React.createElement("div", { className: "trc-parallel-selection-list" },
-        React.createElement("div", { className: "div-lists" },
-            React.createElement("div", { className: "div-left-list" },
-                React.createElement("p", { className: "list-title" }, leftListTitle),
-                searchBarsVisible && (React.createElement("div", { className: "div-search-bar" },
-                    React.createElement(BsSearch, null),
-                    React.createElement("input", { type: "text", value: leftListSearchValue, onChange: (event) => setLeftListSearchValue(event.target.value) }))),
-                React.createElement("div", { className: "list-container" },
-                    React.createElement("button", { className: "apply-all-button", onClick: () => addToSelectedDatumsIds(filteredLeftList.map((datum) => datum._id)) },
-                        leftListApplyAllButtonText,
-                        " ",
-                        React.createElement(BsChevronDoubleRight, null)),
-                    React.createElement("div", { ref: leftListRef, className: "scrollable-section", onScroll: (event) => setLeftListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
-                        React.createElement("div", { className: "resizable-div-for-scroll", style: {
-                                paddingTop: leftListFirstVisibleElementIndex * listElementsHeight,
-                                height: filteredLeftList.length * listElementsHeight,
-                            } }, filteredLeftList
-                            .slice(leftListFirstVisibleElementIndex, leftListLastVisibleElementIndex)
-                            .map((datum) => (React.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
-                            datum.customComponent ? (React.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (React.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName)),
-                            React.createElement("button", { className: "apply-to-one-button", onClick: () => addToSelectedDatumsIds([datum._id]) },
-                                React.createElement(BsChevronRight, null))))))))),
-            React.createElement("div", { className: "div-right-list" },
-                React.createElement("p", { className: "list-title" }, rightListTitle),
-                searchBarsVisible && (React.createElement("div", { className: "div-search-bar" },
-                    React.createElement(BsSearch, null),
-                    React.createElement("input", { type: "text", value: rightListSearchValue, onChange: (event) => setRightListSearchValue(event.target.value) }))),
-                React.createElement("div", { className: "list-container" },
-                    React.createElement("button", { className: "apply-all-button", onClick: () => removeFromSelectedDatumsIds(filteredRightList.map((datum) => datum._id)) },
-                        React.createElement(BsChevronDoubleLeft, null),
-                        " ",
-                        rightListApplyAllButtonText),
-                    React.createElement("div", { ref: rightListRef, className: "scrollable-section", onScroll: (event) => setRightListFirstVisibleElementIndex(Math.floor(event.target.scrollTop / listElementsHeight)) },
-                        React.createElement("div", { className: "resizable-div-for-scroll", style: {
-                                paddingTop: rightListFirstVisibleElementIndex * listElementsHeight,
-                                height: filteredRightList.length * listElementsHeight,
-                            } }, filteredRightList
-                            .slice(rightListFirstVisibleElementIndex, rightListLastVisibleElementIndex)
-                            .map((datum) => (React.createElement("div", { key: datum._id, className: "div-datum-wrapper", style: { height: listElementsHeight } },
-                            React.createElement("button", { className: "apply-to-one-button", onClick: () => removeFromSelectedDatumsIds([datum._id]) },
-                                React.createElement(BsChevronLeft, null)),
-                            datum.customComponent ? (React.createElement("div", { className: "div-custom-component-wrapper" }, datum.customComponent)) : (React.createElement("p", { className: "visible-default-name", title: datum.visibleDefaultName }, datum.visibleDefaultName)))))))))),
-        (cancelAction || applyAction) && (React.createElement("div", { className: "div-action-buttons" },
-            cancelAction && (React.createElement("button", { className: "cancel-button", onClick: () => cancelAction() }, cancelButtonText ? cancelButtonText : "Cancel")),
-            applyAction && (React.createElement("button", { className: "apply-button", onClick: () => applyAction(selectedDatumsIds) }, applyButtonText ? applyButtonText : "Apply"))))));
-};
-export default ParallelSelectionList;

package/dist/esm/components/ParallelSelectionList/types.d.ts

@@ -1,22 +0,0 @@
-export interface ParallelSelectionListPropsTypes {
-  dataList: ListDatumType[];
-  applyAction?: (dataListId: ListDatumType["_id"][]) => void;
-  cancelAction?: Function;
-  onSelectionChange?: (dataListId: ListDatumType["_id"][]) => void;
-  leftListTitle?: string;
-  rightListTitle?: string;
-  leftListApplyAllButtonText?: string;
-  rightListApplyAllButtonText?: string;
-  searchBarsVisible?: boolean;
-  applyButtonText?: string;
-  cancelButtonText?: string;
-  preSelectedDatumsIds?: ListDatumType["_id"][];
-  listElementsHeight?: number;
-}
-
-export type ListDatumType = {
-  _id: string;
-  searchValue: string;
-  visibleDefaultName: string;
-  customComponent?: JSX.Element;
-};

package/dist/esm/components/PopUp/PopUp.css

@@ -1,15 +0,0 @@
-.trc-pop-up {
-  background-color: rgb(255, 255, 255);
-  border-color: rgb(235, 235, 235);
-  border-style: solid;
-  border-width: 0px 1px 1px;
-  box-shadow: rgb(0 0 0 / 15%) 0px 14px 36px 2px;
-  padding: 0px;
-  position: absolute;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
-.trc-pop-up.pop-up-hidden {
-  display: none;
-}

package/dist/esm/components/PopUp/PopUp.js

@@ -1,22 +0,0 @@
-import React, { useState, useRef } from "react";
-import "./PopUp.css";
-//hooks
-import useOutsideClick from "../../hooks/useOutsideClick";
-const PopUp = ({ open = false, children, closeAction, outBoundClickClosesPopUp, aditionalInlineStyle = {}, aditionalClass, activationButtonRef, }) => {
-    //Refs
-    const popUpRef = useRef(null);
-    //Hooks
-    useOutsideClick(popUpRef, () => {
-        if (outBoundClickClosesPopUp) {
-            setOpenState(false);
-            if (closeAction)
-                closeAction();
-        }
-    }, activationButtonRef ? [activationButtonRef] : []);
-    //useState
-    const [openState, setOpenState] = useState(open);
-    return (React.createElement("div", { ref: popUpRef, className: "trc-pop-up" +
-            ((closeAction && open) || (!closeAction && openState) ? "" : " pop-up-hidden") +
-            (aditionalClass ? " " + aditionalClass : ""), style: open ? aditionalInlineStyle : {} }, children));
-};
-export default PopUp;

package/dist/esm/components/PopUp/types.d.ts

@@ -1,9 +0,0 @@
-export interface PopUpPropsType {
-  children: JSX.Element | JSX.Element[];
-  open: boolean;
-  closeAction?: Function;
-  outBoundClickClosesPopUp?: boolean;
-  aditionalInlineStyle?: React.CSSProperties;
-  aditionalClass?: string;
-  activationButtonRef?: React.MutableRefObject<HTMLElement | null>;
-}

package/dist/esm/components/ProgressBar/ProgressBar.css

@@ -1,39 +0,0 @@
-.trc-progress-bar {
-  height: 40px;
-  width: 100%;
-  position: relative;
-  opacity: 0.9;
-  backdrop-filter: blur(10px);
-}
-
-.trc-progress-bar .fillable-body {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: dimgray;
-  border-radius: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  overflow: hidden;
-}
-
-.trc-progress-bar .fillable-body .filler {
-  height: 100%;
-  box-sizing: border-box;
-  transition: all 0.2s;
-  border-radius: 100px;
-}
-
-.trc-progress-bar .fillable-body p {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 600;
-  color: white;
-}

package/dist/esm/components/ProgressBar/ProgressBar.js

@@ -1,31 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import "./ProgressBar.css";
-const ProgressBar = ({ totalSize, currentValue, color = "var(--secondary-color)", }) => {
-    var _a;
-    //useRef
-    const fillableBodyRef = useRef(null);
-    //useStates
-    const [currentPercentage, setCurrentPercentage] = useState(totalSize !== 0 ? currentValue / totalSize : 0);
-    const [barWidth, setBarWidth] = useState(0);
-    //useEffects
-    useEffect(() => {
-        if (totalSize !== 0) {
-            setCurrentPercentage(currentValue / totalSize);
-        }
-        else {
-            setCurrentPercentage(0);
-        }
-    }, [totalSize, currentValue]);
-    useEffect(() => {
-        if (fillableBodyRef.current !== null) {
-            setBarWidth(fillableBodyRef.current.clientWidth);
-        }
-    }, [(_a = fillableBodyRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight]);
-    return (React.createElement("div", { className: "trc-progress-bar" },
-        React.createElement("div", { ref: fillableBodyRef, className: "fillable-body" },
-            React.createElement("div", { className: "filler", style: { width: barWidth * currentPercentage, backgroundColor: color } }),
-            React.createElement("p", null,
-                (currentPercentage * 100).toFixed(0),
-                "%"))));
-};
-export default ProgressBar;

package/dist/esm/components/ProgressBar/types.d.ts

@@ -1,7 +0,0 @@
-import { languageType } from "../../../assets/languages/types";
-
-export interface ProgressBarPropsType {
-  totalSize: number;
-  currentValue: number;
-  color?: string,
-}

package/dist/esm/components/ScreenSteps/ScreenSteps.js

@@ -1,38 +0,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./ScreenSteps.module.scss";
-const ScreenSteps = ({ steps, defaultStep = 0, onStepChange = () => { }, overrideStep, }) => {
-    const [currentStep, setCurrentStep] = useState(defaultStep);
-    const stepClassName = (index) => {
-        let className = styles["step"];
-        const isCompleted = index < currentStep;
-        if (isCompleted) {
-            className += ` ${styles["completed"]}`;
-        }
-        const isCurrent = index === currentStep;
-        if (isCurrent) {
-            className += ` ${styles["current"]}`;
-        }
-        return className;
-    };
-    const stepContentStyle = () => {
-        const translatePercentage = 100 / steps.length;
-        return {
-            width: `${steps.length * 100}%`,
-            transform: `translateX(-${translatePercentage * currentStep}%)`,
-        };
-    };
-    useEffect(() => {
-        const isValidStep = overrideStep !== undefined && overrideStep < steps.length && overrideStep >= 0;
-        if (isValidStep)
-            setCurrentStep(overrideStep);
-    }, [overrideStep]);
-    return (React.createElement("section", { className: styles["screen-steps"] },
-        React.createElement("nav", { className: styles["steps"] }, steps.map((step, index) => (React.createElement("div", { key: step.innerText, className: stepClassName(index), onClick: () => {
-                setCurrentStep(index);
-                onStepChange(index);
-            } }, step.innerText)))),
-        React.createElement("p", { className: styles["outer-text"] }, steps[currentStep].outterText),
-        React.createElement("div", { className: styles["frame"] },
-            React.createElement("div", { className: styles["steps-content"], style: stepContentStyle() }, steps.map((step) => (React.createElement("div", { key: step.innerText, className: styles["step-component"], style: { width: `${100 / steps.length}%` } }, step.component)))))));
-};
-export default ScreenSteps;

package/dist/esm/components/ScreenSteps/ScreenSteps.module.scss

@@ -1,68 +0,0 @@
-.screen-steps {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  .steps {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .step {
-      width: 62px;
-      height: 62px;
-      border-radius: 31px;
-      background-color: #959595;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0.2;
-      color: #000000;
-      text-align: center;
-      font-family: Arial, Helvetica, sans-serif;
-      font-size: 15px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: normal;
-      cursor: pointer;
-      transition: all 300ms ease-in-out;
-      &.completed {
-        opacity: 0.4;
-        background-color: #705a00;
-        color: #000000;
-      }
-      &.current {
-        opacity: 0.4;
-        background-color: #705a00;
-        color: #000000;
-      }
-    }
-  }
-  .outer-text {
-    color: #787878;
-    text-align: center;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    margin: 0;
-  }
-  .frame {
-    height: calc(100% - 82px);
-    width: 100%;
-    overflow: hidden;
-    .steps-content {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      transition: all 300ms ease-in-out;
-      .step-component {
-        height: 100%;
-      }
-    }
-  }
-}

package/dist/esm/components/ScrollSnapGallery/ScrollSnapGallery.js

@@ -1,70 +0,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./ScrollSnapGallery.module.scss";
-//Icons
-import { GoDotFill } from "react-icons/go";
-import { BsArrowLeftCircle, BsArrowRightCircle } from "react-icons/bs";
-const ScrollSnapGallery = ({ urls = [], width = "400px", height = "300px", IndicatorIcon = GoDotFill, positionIndicatorSize = Math.min(urls.length, 6), iconSize = 16, showArrows = false, frameStyle = {}, }) => {
-    const [currentSlide, setCurrentSlide] = useState(0);
-    const [minimumVisibleIndicator, setMinimumVisibleIndicator] = useState(0);
-    const [maximumVisibleIndicator, setMaximumVisibleIndicator] = useState(positionIndicatorSize - 1);
-    const [positionIndicatorXtranslateValue, setPositionIndicatorXtranslateValue] = useState(0);
-    const indicatorIconStyle = (index) => {
-        let className = styles["indicator-icon"];
-        if (currentSlide === index) {
-            className += ` ${styles["current"]}`;
-        }
-        const isMinimumNotFirst = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator;
-        const isMaximumNotLast = maximumVisibleIndicator !== urls.length - 1 && index === maximumVisibleIndicator;
-        if (isMinimumNotFirst || isMaximumNotLast) {
-            className += ` ${styles["full-shrunken"]}`;
-        }
-        const isOneAfterMinimumNotSecond = minimumVisibleIndicator !== 0 && index === minimumVisibleIndicator + 1;
-        const isOneBeforeMaximumNotSecond = maximumVisibleIndicator !== urls.length - 1 &&
-            index === maximumVisibleIndicator - 1;
-        if (isOneAfterMinimumNotSecond || isOneBeforeMaximumNotSecond) {
-            className += ` ${styles["medium-shrunken"]}`;
-        }
-        if (index < minimumVisibleIndicator || index > maximumVisibleIndicator) {
-            className += ` ${styles["hidden"]}`;
-        }
-        return className;
-    };
-    const handleScroll = (event) => {
-        const { scrollLeft, clientWidth } = event.target;
-        const slideWidth = clientWidth;
-        const slideIndex = Math.round(scrollLeft / slideWidth);
-        setCurrentSlide(slideIndex);
-        if (slideIndex <= minimumVisibleIndicator) {
-            const minumum = Math.max(slideIndex - 1, 0);
-            const maximum = minumum + positionIndicatorSize - 1;
-            setMinimumVisibleIndicator(minumum);
-            setMaximumVisibleIndicator(maximum);
-        }
-        else if (slideIndex >= maximumVisibleIndicator) {
-            const maximum = Math.min(slideIndex + 1, urls.length - 1);
-            const minumum = maximum - positionIndicatorSize + 1;
-            setMaximumVisibleIndicator(maximum);
-            setMinimumVisibleIndicator(minumum);
-        }
-    };
-    useEffect(() => {
-        setPositionIndicatorXtranslateValue(minimumVisibleIndicator * iconSize);
-    }, [minimumVisibleIndicator]);
-    return (React.createElement("section", { className: styles["scroll-snap-gallery"] },
-        React.createElement("div", { className: styles["frame"], style: Object.assign(Object.assign({}, frameStyle), { width, height }), onScroll: handleScroll }, urls.map((url, index) => {
-            return React.createElement("img", { key: url + index, src: url, alt: "gallery item" });
-        })),
-        React.createElement("div", { className: styles["arrow-controls"] },
-            showArrows && (React.createElement(BsArrowLeftCircle, { className: styles["arrow"], onClick: () => {
-                    const frame = document.querySelector(`.${styles["frame"]}`);
-                    frame.scrollLeft -= frame.clientWidth;
-                } })),
-            React.createElement("div", { className: styles["position-indicator"], style: {
-                    transform: `translateX(calc(50% - ${positionIndicatorXtranslateValue}px - ${(iconSize * positionIndicatorSize) / 2}px))`,
-                } }, urls.map((url, index) => (React.createElement(IndicatorIcon, { key: url + index, className: indicatorIconStyle(index), style: { width: iconSize, height: iconSize } })))),
-            showArrows && (React.createElement(BsArrowRightCircle, { className: styles["arrow"], onClick: () => {
-                    const frame = document.querySelector(`.${styles["frame"]}`);
-                    frame.scrollLeft += frame.clientWidth;
-                } })))));
-};
-export default ScrollSnapGallery;

package/dist/esm/components/ScrollSnapGallery/ScrollSnapGallery.module.scss

@@ -1,67 +0,0 @@
-.scroll-snap-gallery {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  .frame {
-    display: flex;
-    align-items: center;
-    scroll-snap-type: x mandatory;
-    scroll-snap-stop: always;
-    scroll-behavior: smooth;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    user-select: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    img {
-      scroll-snap-align: center;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-  .arrow-controls {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 10px;
-    .arrow {
-      width: 24px;
-      height: 24px;
-      fill: #959595;
-      transition: all 100ms ease-in-out;
-      z-index: 2;
-      cursor: pointer;
-      &:active {
-        fill: #0d280b;
-      }
-    }
-    .position-indicator {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      transition: all 0.3s ease-in-out;
-      .indicator-icon {
-        fill: #959595;
-        transition: all 0.3s ease-in-out;
-        &.current {
-          fill: #0d280b;
-        }
-        &.medium-shrunken {
-          transform: scale(0.75);
-        }
-        &.full-shrunken {
-          transform: scale(0.5);
-        }
-        &.hidden {
-          transform: scale(0);
-        }
-      }
-    }
-  }
-}

package/dist/esm/components/SearchBar/SearchBar.css

@@ -1,35 +0,0 @@
-.trc-search-bar .div-search-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgb(185, 185, 185);
-  box-sizing: border-box;
-  margin: 2px 10px;
-  padding: 5px 0px;
-  border-radius: 6px;
-}
-
-.trc-search-bar .div-search-bar input {
-  width: 100%;
-  border: none;
-}
-
-.trc-search-bar .div-search-bar input:focus {
-  border: none;
-  outline: none;
-}
-
-.trc-search-bar .div-search-bar svg {
-  width: 36px;
-  padding: 0px 10px;
-}
-
-.trc-search-bar .div-search-bar .icono-search-bar-opciones {
-  cursor: pointer;
-  transition: all 0.5s;
-}
-
-.trc-search-bar .div-search-bar .icono-search-bar-opciones.icono-search-bar-opciones-desactivado {
-  cursor: not-allowed;
-  color: rgb(184, 184, 184);
-}

package/dist/esm/components/SearchBar/SearchBar.js

@@ -1,29 +0,0 @@
-import React, { useState } from "react";
-import "./SearchBar.css";
-//Icons
-import { BsSearch, BsSliders } from "react-icons/bs";
-const SearchBar = ({ actionOnEnter = () => { }, actionOnAlteringText = () => { }, actionOnEmptyText = () => { }, optionsButtonVisible, actionOnClickOptionsButton = () => { }, placeholder = "", initialValue = "", disabled = false, }) => {
-    //Estados
-    const [searchValue, setSearchValue] = useState(initialValue);
-    return (React.createElement("form", { className: "trc-search-bar", onSubmit: (e) => {
-            e.preventDefault();
-            let searchElement = e.target.elements.namedItem("search-bar-name");
-            if (searchElement !== null)
-                actionOnEnter(searchElement.value);
-        } },
-        React.createElement("div", { className: "div-search-bar" },
-            React.createElement("div", null,
-                React.createElement(BsSearch, null)),
-            React.createElement("input", { name: "search-bar-name", type: "text", placeholder: placeholder, disabled: disabled, onChange: (e) => {
-                    setSearchValue(e.target.value);
-                    if (e.target.value)
-                        actionOnAlteringText();
-                    if (!e.target.value)
-                        actionOnEmptyText();
-                }, value: searchValue }),
-            optionsButtonVisible && (React.createElement("div", { className: disabled
-                    ? "icono-search-bar-opciones icono-search-bar-opciones-disabled"
-                    : "icono-search-bar-opciones", onClick: () => actionOnClickOptionsButton() },
-                React.createElement(BsSliders, null))))));
-};
-export default SearchBar;

package/dist/esm/components/SearchBar/types.d.ts

@@ -1,10 +0,0 @@
-export interface SearchBarPropsType {
-  actionOnEnter?: function;
-  actionOnAlteringText?: function;
-  actionOnEmptyText?: function;
-  optionsButtonVisible: boolean;
-  actionOnClickOptionsButton?: function;
-  placeholder: string;
-  initialValue?: string;
-  disabled?: boolean;
-}