@mindly/ui-components 8.0.0-alpha.38 → 8.1.0

package/dist/esm/lib/EntryNotFound/EntryNotFound.style.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-export const EntryNodFoundContainer = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-export const EntryNotFoundTitle = styled.span `
-  font-size: 16px;
-  font-weight: 600;
-  color: #1d201f;
-  margin-top: 20px;
-`;

package/dist/esm/lib/EntryNotFound/index.d.ts

@@ -1 +0,0 @@
-export * from './EntryNotFound';

package/dist/esm/lib/EntryNotFound/index.js

@@ -1 +0,0 @@
-export * from './EntryNotFound';

package/dist/esm/lib/Filters/ListSelect/ListSelect.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IonIcon, IonList } from '@ionic/react';
-import { checkmarkOutline } from 'ionicons/icons';
-import { IonItemStyled, IonLabelStyled, ListTitle } from './ListSelect.style';
-const ListSelect = ({ title, listItems, onChange, selected, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(ListTitle, { children: title }), _jsx(IonList, Object.assign({ lines: "none", mode: "ios" }, { children: listItems.map((item) => (_jsxs(IonItemStyled, Object.assign({ mode: "ios", button: true, detail: false, onClick: () => onChange(item), fill: "solid" }, { children: [_jsx(IonLabelStyled, Object.assign({ color: selected === item.id ? 'primary' : 'medium' }, { children: item.label })), selected === item.id && (_jsx(IonIcon, { icon: checkmarkOutline, slot: "end" }))] }), item.id))) }))] }));
-};
-export default ListSelect;

package/dist/esm/lib/Filters/ListSelect/ListSelect.style.js

@@ -1,35 +0,0 @@
-import { IonItem, IonLabel } from '@ionic/react';
-import styled from 'styled-components';
-export const ListTitle = styled.h3 `
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 24px;
-  color: #1d201f;
-  margin-bottom: 16px;
-`;
-export const IonItemStyled = styled(IonItem) `
-  --padding-start: 0;
-  --inner-padding-end: 0;
-  --min-height: 32px;
-  --background-hover: transparent;
-  --background-activated: transparent;
-  --background: transparent;
-  margin-bottom: 4px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  & ion-icon {
-    margin: 0 8px 0 0;
-    color: #177590;
-    font-size: 18px;
-    --ionicon-stroke-width: 48px;
-  }
-`;
-export const IonLabelStyled = styled(IonLabel) `
-  margin: 0;
-  font-weight: 600;
-  font-size: 14px !important;
-  line-height: 16px;
-`;

package/dist/esm/lib/Filters/ListSelect/index.js

@@ -1,2 +0,0 @@
-export { default } from './ListSelect';
-export * from './types';

package/dist/esm/lib/Filters/ListSelect/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/lib/Filters/Range/Range.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { RangeHeader, RangeStyled } from './Range.style';
-export const Range = ({ title, rangeTitleValues = '', initialValue, onKnobMoveEnd, }) => {
-    const [value, setValue] = useState(initialValue);
-    const handleKnobMoveEnd = useCallback((e) => {
-        const eventValue = e.detail.value;
-        setValue(eventValue);
-        onKnobMoveEnd === null || onKnobMoveEnd === void 0 ? void 0 : onKnobMoveEnd(eventValue);
-    }, []);
-    return (_jsxs(_Fragment, { children: [_jsxs(RangeHeader, { children: [_jsx("h3", { children: title }), _jsx("span", { children: `${rangeTitleValues}${value.lower}-${value.upper}` })] }), _jsx(RangeStyled, { min: initialValue.lower, max: initialValue.upper, step: 1, dualKnobs: true, value: value, mode: "ios", onIonKnobMoveEnd: handleKnobMoveEnd })] }));
-};

package/dist/esm/lib/Filters/Range/Range.style.js

@@ -1,39 +0,0 @@
-import { IonRange } from '@ionic/react';
-import styled from 'styled-components';
-export const RangeStyled = styled(IonRange) `
-  --bar-background-active: #177590;
-  --bar-height: 3px;
-  /* --knob-background: transparent; */
-  --knob-box-shadow: none;
-  --knob-size: 22px;
-  --height: 22px;
-  padding: 0 17px 0 11px;
-  ::part(knob) {
-    border: 3px solid #177590;
-    top: 8px;
-  }
-
-  .range-knob-b {
-    left: 100%;
-  }
-`;
-export const RangeHeader = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-
-  & h3 {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    color: #1d201f;
-  }
-
-  & span {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    color: #177590;
-  }
-`;

package/dist/esm/lib/Filters/Range/index.js

@@ -1 +0,0 @@
-export { Range as default } from './Range';

package/dist/esm/lib/Filters/RowSelect/RowSelect.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { RowButton, RowTitle, RowWrapper } from './RowSelect.style';
-const RowSelect = ({ title, rowItems, selected, onChange, }) => {
-    return (_jsxs(_Fragment, { children: [_jsx(RowTitle, { children: title }), _jsx(RowWrapper, { children: rowItems.map((item) => (_jsx(RowButton, Object.assign({ selected: selected === item.id, onClick: () => onChange(item) }, { children: item.label }), item.id))) })] }));
-};
-export default RowSelect;

package/dist/esm/lib/Filters/RowSelect/RowSelect.style.js

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-export const RowWrapper = styled.div `
-  display: flex;
-  gap: 21px;
-  align-items: centers;
-  padding-left: 7px;
-`;
-export const RowButton = styled.button `
-  background: transparent;
-  font-weight: 600;
-  font-size: ${({ selected }) => (selected ? 28 : 24)}px;
-  line-height: 32px;
-  color: ${({ selected }) => (selected ? '#177590' : '#c1c1c1')};
-  padding: 0;
-  border: none;
-`;
-export const RowTitle = styled.h3 `
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 24px;
-  color: #1d201f;
-  margin-bottom: 18px;
-`;

package/dist/esm/lib/Filters/RowSelect/index.js

@@ -1,2 +0,0 @@
-export { default } from './RowSelect';
-export * from './types';

package/dist/esm/lib/Filters/RowSelect/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/lib/Filters/Toggle/Toggle.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IonToggle } from '@ionic/react';
-import { ToggleTitle, ToggleWrapper } from './Toggle.style';
-export const Toggle = ({ title, checked = false, onChange, }) => {
-    return (_jsxs(ToggleWrapper, { children: [_jsx(ToggleTitle, { children: title }), _jsx(IonToggle, { mode: "ios", checked: checked, onIonChange: (e) => onChange(e.detail.checked) })] }));
-};

package/dist/esm/lib/Filters/Toggle/Toggle.style.js

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-export const ToggleWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const ToggleTitle = styled.h3 `
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 24px;
-  color: #1d201f;
-`;

package/dist/esm/lib/Filters/Toggle/index.js

@@ -1 +0,0 @@
-export { Toggle as default } from './Toggle';

package/dist/esm/lib/Flag/Flag.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { ReactComponent as UAIcon } from './flags/ua.svg';
-import { ReactComponent as PLIcon } from './flags/pl.svg';
-import { ReactComponent as GBIcon } from './flags/gb.svg';
-import { ReactComponent as RUIcon } from './flags/ru.svg';
-import { FlagWrapper } from './Flag.style';
-export const FlagTypes = {
-    uk: _jsx(UAIcon, {}),
-    ua: _jsx(UAIcon, {}),
-    pl: _jsx(PLIcon, {}),
-    gb: _jsx(GBIcon, {}),
-    en: _jsx(GBIcon, {}),
-    ru: _jsx(RUIcon, {}),
-    es: _jsx("div", {}),
-};
-const Flag = ({ name, dimensions = 24, className }) => {
-    return (_jsx(FlagWrapper, Object.assign({ dimensions: dimensions, className: className }, { children: FlagTypes[name] })));
-};
-export default React.memo(Flag);

package/dist/esm/lib/Flag/Flag.style.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-export const FlagWrapper = styled.div `
-  width: ${({ dimensions }) => dimensions}px;
-  height: ${({ dimensions }) => dimensions}px;
-  flex: 0 0 ${({ dimensions }) => dimensions}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  & svg {
-    border-radius: 5px;
-    width: 100%;
-    height: auto;
-  }
-`;

package/dist/esm/lib/Flag/index.js

@@ -1,2 +0,0 @@
-export { default } from './Flag';
-export * from './Flag';

package/dist/esm/lib/FrequentlyAskedQuestions/FrequentlyAskedQuestions.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FrequentlyAskedQuestionsContainer, FrequentlyAskedQuestionsIcon, FrequentlyAskedQuestionsText, } from './FrequentlyAskedQuestions.styled';
-import { informationCircle } from 'ionicons/icons';
-const FrequentlyAskedQuestions = ({ text, alignment, }) => {
-    return (_jsxs(FrequentlyAskedQuestionsContainer, Object.assign({ alignment: alignment }, { children: [_jsx(FrequentlyAskedQuestionsIcon, { icon: informationCircle }), _jsx(FrequentlyAskedQuestionsText, { children: text })] })));
-};
-export default FrequentlyAskedQuestions;

package/dist/esm/lib/FrequentlyAskedQuestions/FrequentlyAskedQuestions.styled.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import { IonIcon } from '@ionic/react';
-export const FrequentlyAskedQuestionsContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: ${({ alignment }) => alignment === 'left'
-    ? 'flex-start'
-    : alignment === 'right'
-        ? 'flex-end'
-        : 'center'};
-  gap: 2px;
-  cursor: pointer;
-`;
-export const FrequentlyAskedQuestionsIcon = styled(IonIcon) `
-  font-size: 30px;
-  color: #1d201f;
-`;
-export const FrequentlyAskedQuestionsText = styled.h4 `
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  color: #1d201f;
-`;

package/dist/esm/lib/FrequentlyAskedQuestions/index.js

@@ -1 +0,0 @@
-export { default } from './FrequentlyAskedQuestions';

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-export type HorizontalCalendarProps = {
-    consultationDatesSeconds?: number[];
-    myNotesDatesSeconds?: number[];
-    toMeNotesDatesSeconds?: number[];
-    /**
-     * Days to be rendered. e.g. 15 - means 7 before today and 7 after today
-     */
-    daysToRender?: number;
-    value?: DayToRender | Date;
-    onChange?: (value: DayToRender) => void;
-    /**
-     * date from which a component should start coordinates.
-     * e.g. startFrom = "15.01.2022", daysToRender=5
-     * return ["13.02.2022", "14.01.2022", "15.01.2022", "16.01.2022", "17.01.2022"]
-     *
-     */
-    startFrom?: Date;
-    showSkeleton?: boolean;
-};
-declare enum DayOfWeek {
-    SUN = "\u041D\u0434",
-    MON = "\u041F\u043D",
-    TUE = "\u0412\u0442",
-    WED = "\u0421\u0440",
-    THU = "\u0427\u0442",
-    FRI = "\u041F\u0442",
-    SAT = "\u0421\u0431"
-}
-export type DayToRender = {
-    /**
-     * e.g. "2.2.122", "24.4.122"
-     */
-    shortDate: string;
-    dayOfMonth: number;
-    dayOfWeek: DayOfWeek;
-    date: Date;
-};
-export declare const HorizontalCalendar: React.FC<HorizontalCalendarProps>;
-export {};

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.js

@@ -1,139 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import HorizontalCalendarStyled from './HorizontalCalendar.styled';
-import { IonSkeletonText, useIonViewDidEnter } from '@ionic/react';
-var DayOfWeek;
-(function (DayOfWeek) {
-    DayOfWeek["SUN"] = "\u041D\u0434";
-    DayOfWeek["MON"] = "\u041F\u043D";
-    DayOfWeek["TUE"] = "\u0412\u0442";
-    DayOfWeek["WED"] = "\u0421\u0440";
-    DayOfWeek["THU"] = "\u0427\u0442";
-    DayOfWeek["FRI"] = "\u041F\u0442";
-    DayOfWeek["SAT"] = "\u0421\u0431";
-})(DayOfWeek || (DayOfWeek = {}));
-function dateToDayOfWeek(date) {
-    const day = date.getDay();
-    switch (day) {
-        default:
-        case 0:
-            return DayOfWeek.SUN;
-        case 1:
-            return DayOfWeek.MON;
-        case 2:
-            return DayOfWeek.TUE;
-        case 3:
-            return DayOfWeek.WED;
-        case 4:
-            return DayOfWeek.THU;
-        case 5:
-            return DayOfWeek.FRI;
-        case 6:
-            return DayOfWeek.SAT;
-    }
-}
-function dateToShortDate(d) {
-    return d.toDateString();
-}
-const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
-function getDaysToRender(daysToRender = 15, startFrom = new Date()) {
-    const daysAroundTodayCount = Math.floor(daysToRender / 2);
-    const days = [];
-    const startingDate = startFrom.valueOf() - (MILLISECONDS_IN_DAY * daysAroundTodayCount);
-    for (let i = 0, currentDate = startingDate; i < daysToRender; i++, currentDate += MILLISECONDS_IN_DAY) {
-        const date = new Date(currentDate);
-        days.push({
-            shortDate: dateToShortDate(date),
-            dayOfWeek: dateToDayOfWeek(date),
-            dayOfMonth: date.getDate(),
-            date: date,
-        });
-    }
-    return days;
-}
-function secondsToShortDate(seconds) {
-    const date = new Date(seconds * 1000);
-    return dateToShortDate(date);
-}
-function secondsArrayToShortDatesSet(secondsArray = []) {
-    if (!Array.isArray(secondsArray))
-        return new Set();
-    const shortDatesArray = secondsArray.map(sec => secondsToShortDate(sec));
-    const set = new Set(shortDatesArray);
-    return set;
-}
-export const HorizontalCalendar = (props) => {
-    var _a;
-    const dateNow = new Date();
-    const [daysToRender, setDaysToRender] = useState([]);
-    const currentShortDate = dateToShortDate(dateNow);
-    const todayRef = useRef(null);
-    const consultationsShortDatesSet = useMemo(() => {
-        return secondsArrayToShortDatesSet(props.consultationDatesSeconds);
-    }, [props.consultationDatesSeconds]);
-    const myNotesDatesSet = useMemo(() => {
-        return secondsArrayToShortDatesSet(props.myNotesDatesSeconds);
-    }, [props.myNotesDatesSeconds]);
-    const toMeNotesDatesSet = useMemo(() => {
-        return secondsArrayToShortDatesSet(props.toMeNotesDatesSeconds);
-    }, [props.toMeNotesDatesSeconds]);
-    useEffect(() => {
-        const toRender = getDaysToRender(props.daysToRender, props.startFrom);
-        setDaysToRender(toRender);
-    }, [props.daysToRender, dateNow.getDate(), props.startFrom]);
-    const scrollToSelectedDay = useCallback(() => {
-        var _a;
-        if (props.showSkeleton)
-            return;
-        if (!todayRef.current)
-            return;
-        (_a = todayRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
-    }, [todayRef.current, props.showSkeleton]);
-    useEffect(() => {
-        scrollToSelectedDay();
-    }, [todayRef.current, props.showSkeleton]);
-    useEffect(() => {
-        // eslint-disable-next-line no-restricted-globals
-        const S = self;
-        const handler = () => {
-            scrollToSelectedDay();
-        };
-        S.addEventListener('calendar_scroll', handler);
-        return () => {
-            S.removeEventListener('calendar_scroll', handler);
-        };
-    }, []);
-    useIonViewDidEnter(scrollToSelectedDay);
-    const valueShortDate = props.value && (props.value instanceof Date ?
-        dateToShortDate(props.value)
-        : (_a = props.value) === null || _a === void 0 ? void 0 : _a.shortDate);
-    return (_jsx(HorizontalCalendarStyled, { children: _jsx("ul", { children: daysToRender.map(day => {
-                if (props.showSkeleton) {
-                    return (_jsx("li", { children: _jsxs("div", Object.assign({ className: "day skeleton" }, { children: [_jsx("div", Object.assign({ className: "title" }, { children: _jsx(IonSkeletonText, { className: "sk", animated: true }) })), _jsx("div", { className: "tags" }), _jsx("div", Object.assign({ className: "day-content" }, { children: _jsx(IonSkeletonText, { className: "sk", animated: true }) }))] })) }, day.shortDate));
-                }
-                const isToday = day.shortDate === currentShortDate;
-                const hasConsultations = consultationsShortDatesSet.has(day.shortDate);
-                const isSelected = props.value ? (valueShortDate === day.shortDate) : isToday;
-                const hasMyNote = myNotesDatesSet.has(day.shortDate);
-                const hasToMeNotes = toMeNotesDatesSet.has(day.shortDate);
-                const classList = [];
-                if (isSelected)
-                    classList.push('selected');
-                if (isToday)
-                    classList.push('today');
-                if (hasConsultations)
-                    classList.push('has-consultation');
-                if (hasMyNote)
-                    classList.push('has-my-note');
-                if (hasToMeNotes)
-                    classList.push('has-tome-notes');
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const attributes = {};
-                if (classList.length) {
-                    attributes.className = classList.join(' ');
-                }
-                return (_jsx("li", Object.assign({ onClick: () => {
-                        props.onChange && props.onChange(day);
-                    } }, attributes, { children: _jsxs("div", Object.assign({ className: "day", ref: isToday ? todayRef : null }, { children: [_jsx("div", Object.assign({ className: "title" }, { children: isToday ? 'Зараз' : day.dayOfWeek })), _jsx("div", Object.assign({ className: "tags" }, { children: _jsx("span", { className: "draw" }) })), _jsx("div", Object.assign({ className: "day-content" }, { children: day.dayOfMonth }))] })) }), day.shortDate));
-            }) }) }));
-};

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.styled.d.ts

@@ -1,2 +0,0 @@
-declare const HorizontalCalendarStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
-export default HorizontalCalendarStyled;

package/dist/esm/lib/HorisontalCalendar/HorizontalCalendar.styled.js

@@ -1,115 +0,0 @@
-import styled from 'styled-components';
-const HorizontalCalendarStyled = styled.div `
-  --contrastColor: #177590;
-  --highlightColor: #d6f2f9;
-  user-select: none;
-
-  ul {
-    list-style: none;
-    display: flex;
-    gap: 9px;
-    overflow: scroll;
-    width: 100%;
-    white-space: nowrap;
-    padding: 0;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    li {
-      display: inline-block;
-      height: 70px;
-      width: 44px;
-      border-radius: 8px;
-      padding: 6px;
-
-      .day {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        align-content: center;
-        font-family: 'Inter';
-        font-style: normal;
-        font-weight: 700;
-
-        .title {
-          font-size: 10px;
-          line-height: 14px;
-          text-transform: uppercase;
-        }
-
-        .tags {
-          height: 11px;
-        }
-
-        .day-content {
-          font-size: 16px;
-          line-height: 16px;
-          height: 32px;
-          width: 32px;
-          border: 1px solid var(--contrastColor);
-          border-radius: 50%;
-          display: flex;
-          justify-content: center;
-          justify-items: center;
-          align-items: center;
-          align-content: center;
-        }
-      }
-
-      &.selected {
-        background-color: var(--highlightColor);
-      }
-
-      &.has-consultation .day .day-content {
-        background-color: var(--contrastColor);
-        color: #fff;
-      }
-
-      &.has-my-note .day .tags,
-      &.has-tome-notes .day .tags {
-        position: relative;
-
-        .draw {
-          position: absolute;
-          width: 5px;
-          height: 5px;
-          left: -2px;
-          top: 1px;
-          border-radius: 3px;
-          background: #177590;
-        }
-      }
-
-      &.has-tome-notes .day .tags .draw {
-        width: 15px;
-        left: -7px;
-      }
-
-      .day.skeleton {
-        .title .sk {
-          width: 15px;
-          height: 14px;
-          border-radius: 4px;
-        }
-
-        .tags {
-          height: 5px;
-        }
-
-        .day-content {
-          border: none;
-
-          .sk {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-          }
-        }
-      }
-    }
-  }
-`;
-export default HorizontalCalendarStyled;

package/dist/esm/lib/HorisontalCalendar/index.d.ts

@@ -1 +0,0 @@
-export * from './HorizontalCalendar';

package/dist/esm/lib/HorisontalCalendar/index.js

@@ -1 +0,0 @@
-export * from './HorizontalCalendar';

package/dist/esm/lib/ImageWithFallback/ImageWithFallback.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function filterImgProps(props) {
-    const props2 = Object.assign({}, props);
-    delete props2.onErrorContent;
-    return props2;
-}
-const ImageWithFallback = (props) => {
-    const [hasError, setHasError] = useState(false);
-    const innerProps = filterImgProps(props);
-    useEffect(() => {
-        setHasError(false);
-    }, [props.src]);
-    const onErrorHandler = useCallback((e) => {
-        var _a;
-        setHasError(!!e);
-        (_a = props === null || props === void 0 ? void 0 : props.onError) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, []);
-    const onLoadHandler = useCallback((e) => {
-        var _a;
-        (_a = props === null || props === void 0 ? void 0 : props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props, e);
-    }, []);
-    if (hasError) {
-        return props.onErrorContent;
-    }
-    return (_jsx("img", Object.assign({}, innerProps, { onError: onErrorHandler, onLoad: onLoadHandler })));
-};
-export default ImageWithFallback;

package/dist/esm/lib/Inputs/CheckboxList/CheckboxList.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import CustomCheckbox, { CheckboxTypes } from '../CustomCheckbox/CustomCheckbox';
-import { CheckboxListWrapper, FullListWrapper, ListMoreButton } from './CheckboxList.style';
-import { IonContent, IonModal } from '@ionic/react';
-import Container from '../../Container';
-import ChevronHeader from '../../ChevronHeader';
-import AppFooter from '../../AppFooter';
-import CustomButton from '../../CustomButton';
-const CheckboxList = ({ type, items, selected = [], name, onChange, moreLabel, title, className = '', selectedBy = 'id', translation, }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(selected);
-    useEffect(() => {
-        setSelectedItems(items
-            .map((c) => c.items.map((i) => i[selectedBy]))
-            .flat()
-            .filter((s) => selected === null || selected === void 0 ? void 0 : selected.includes(s)));
-    }, [selected, items, selectedBy]);
-    const allItemsCount = useMemo(() => items === null || items === void 0 ? void 0 : items.reduce((prev, c) => prev + c.items.length, 0), [items]);
-    const mainItems = useMemo(() => {
-        const itemsData = [];
-        items.forEach((c) => {
-            itemsData.push(...c.items.filter((i) => (!moreLabel ? true : i.isFavorite)), ...c.items.filter((i) => moreLabel && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.includes(i[selectedBy])) && !i.isFavorite));
-        });
-        return itemsData;
-    }, [selectedItems, items, moreLabel, selectedBy]);
-    const onChangeHandler = useCallback((id, checked) => {
-        let selectedArr = [];
-        if (checked) {
-            selectedArr = [...selectedItems, id];
-        }
-        else {
-            selectedArr = [...selectedItems.filter((s) => s !== id)];
-        }
-        setSelectedItems(selectedArr);
-        onChange === null || onChange === void 0 ? void 0 : onChange(selectedArr);
-    }, [onChange, selectedItems]);
-    return (_jsxs(_Fragment, { children: [_jsx(CheckboxListWrapper, Object.assign({ className: `${type} ${className}` }, { children: mainItems.map((i) => (_jsx("li", { children: _jsx(CustomCheckbox, { type: type, name: name, value: i[selectedBy], label: i.label, icon: i.icon, defaultChecked: !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((s) => s === i[selectedBy])), onChange: (e) => onChangeHandler(e.target.value, e.target.checked) }) }, i.id))) })), moreLabel && (_jsx(ListMoreButton, Object.assign({ onClick: () => setIsOpen(true), type: "button" }, { children: moreLabel }))), _jsxs(IonModal, Object.assign({ isOpen: isOpen, backdropDismiss: false, mode: "ios", onDidDismiss: () => setIsOpen(false) }, { children: [_jsx(ChevronHeader, { onClick: () => setIsOpen(false), title: title, subTitle: `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${translation.from} ${allItemsCount}` }), _jsx(IonContent, { children: _jsx(Container, { children: _jsxs(FullListWrapper, { children: [_jsx("li", Object.assign({ className: "list-group" }, { children: translation.mostUsedText })), items.map((c) => c.items
-                                        .filter((i) => i.isFavorite)
-                                        .map((i) => (_jsx("li", { children: _jsx(CustomCheckbox, { type: CheckboxTypes.LIST, name: name, value: i[selectedBy], label: i.label, defaultChecked: !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((s) => s === i[selectedBy])), onChange: (e) => onChangeHandler(e.target.value, e.target.checked) }) }, i.id)))), items.map((g) => (_jsxs(React.Fragment, { children: [_jsx("li", Object.assign({ className: "list-group" }, { children: g.name })), g.items
-                                                .filter((c) => !c.isFavorite)
-                                                .map((c) => (_jsx("li", { children: _jsx(CustomCheckbox, { type: CheckboxTypes.LIST, name: name, value: c[selectedBy], label: c.label, defaultChecked: !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((s) => s === c[selectedBy])), onChange: (e) => onChangeHandler(e.target.value, e.target.checked) }) }, `${c.id}_modal`)))] }, g.name)))] }) }) }), _jsx(AppFooter, Object.assign({ style: { padding: '12px 0' } }, { children: _jsx(CustomButton, Object.assign({ buttonType: 'primary', onClick: () => setIsOpen(false) }, { children: translation.buttonText })) }))] }))] }));
-};
-export default React.memo(CheckboxList);