funda-ui 1.0.272

package/lib/esm/ModalDialog/plugins/BSL/bodyScrollLock.es6.js

@@ -0,0 +1,262 @@
+
+
+// Older browsers don't support event options, feature detect it.
+
+// Adopted and modified solution from Bohdan Didukh (2017)
+// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi
+
+let hasPassiveEvents = false;
+if (typeof window !== 'undefined') {
+  const passiveTestOptions = {
+    get passive() {
+      hasPassiveEvents = true;
+      return undefined;
+    }
+  };
+  window.addEventListener('testPassive', null, passiveTestOptions);
+  window.removeEventListener('testPassive', null, passiveTestOptions);
+}
+
+const isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);
+
+
+let locks = [];
+let documentListenerAdded = false;
+let initialClientY = -1;
+let previousBodyOverflowSetting;
+let previousBodyPosition;
+let previousBodyPaddingRight;
+
+// returns true if `el` should be allowed to receive touchmove events.
+const allowTouchMove = el => locks.some(lock => {
+  if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {
+    return true;
+  }
+
+  return false;
+});
+
+const preventDefault = rawEvent => {
+  const e = rawEvent || window.event;
+
+  // For the case whereby consumers adds a touchmove event listener to document.
+  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })
+  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then
+  // the touchmove event on document will break.
+  if (allowTouchMove(e.target)) {
+    return true;
+  }
+
+  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+  if (e.touches.length > 1) return true;
+
+  if (e.preventDefault) e.preventDefault();
+
+  return false;
+};
+
+const setOverflowHidden = options => {
+  // If previousBodyPaddingRight is already set, don't set it again.
+  if (previousBodyPaddingRight === undefined) {
+    const reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;
+    const scrollBarGap = window.innerWidth - document.documentElement.clientWidth;
+
+    if (reserveScrollBarGap && scrollBarGap > 0) {
+      const computedBodyPaddingRight = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right'), 10);
+      previousBodyPaddingRight = document.body.style.paddingRight;
+      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarGap}px`;
+    }
+  }
+
+  // If previousBodyOverflowSetting is already set, don't set it again.
+  if (previousBodyOverflowSetting === undefined) {
+    previousBodyOverflowSetting = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+};
+
+const restoreOverflowSetting = () => {
+  if (previousBodyPaddingRight !== undefined) {
+    document.body.style.paddingRight = previousBodyPaddingRight;
+
+    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it
+    // can be set again.
+    previousBodyPaddingRight = undefined;
+  }
+
+  if (previousBodyOverflowSetting !== undefined) {
+    document.body.style.overflow = previousBodyOverflowSetting;
+
+    // Restore previousBodyOverflowSetting to undefined
+    // so setOverflowHidden knows it can be set again.
+    previousBodyOverflowSetting = undefined;
+  }
+};
+
+const setPositionFixed = () => window.requestAnimationFrame(() => {
+  // If previousBodyPosition is already set, don't set it again.
+  if (previousBodyPosition === undefined) {
+    previousBodyPosition = {
+      position: document.body.style.position,
+      top: document.body.style.top,
+      left: document.body.style.left
+    };
+
+    // Update the dom inside an animation frame
+    const { scrollY, scrollX, innerHeight } = window;
+    document.body.style.position = 'fixed';
+    document.body.style.top = `${-scrollY}px`;
+    document.body.style.left = `${-scrollX}px`;
+
+    setTimeout(() => window.requestAnimationFrame(() => {
+      // Attempt to check if the bottom bar appeared due to the position change
+      const bottomBarHeight = innerHeight - window.innerHeight;
+      if (bottomBarHeight && scrollY >= innerHeight) {
+        // Move the content further up so that the bottom bar doesn't hide it
+        document.body.style.top = -(scrollY + bottomBarHeight);
+      }
+    }), 300);
+  }
+});
+
+const restorePositionSetting = () => {
+  if (previousBodyPosition !== undefined) {
+    // Convert the position from "px" to Int
+    const y = -parseInt(document.body.style.top, 10);
+    const x = -parseInt(document.body.style.left, 10);
+
+    // Restore styles
+    document.body.style.position = previousBodyPosition.position;
+    document.body.style.top = previousBodyPosition.top;
+    document.body.style.left = previousBodyPosition.left;
+
+    // Restore scroll
+    window.scrollTo(x, y);
+
+    previousBodyPosition = undefined;
+  }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
+const isTargetElementTotallyScrolled = targetElement => targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;
+
+const handleScroll = (event, targetElement) => {
+  const clientY = event.targetTouches[0].clientY - initialClientY;
+
+  if (allowTouchMove(event.target)) {
+    return false;
+  }
+
+  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {
+    // element is at the top of its scroll.
+    return preventDefault(event);
+  }
+
+  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {
+    // element is at the bottom of its scroll.
+    return preventDefault(event);
+  }
+
+  event.stopPropagation();
+  return true;
+};
+
+export const disableBodyScroll = (targetElement, options) => {
+  // targetElement must be provided
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');
+    return;
+  }
+
+  // disableBodyScroll must not have been called on this targetElement before
+  if (locks.some(lock => lock.targetElement === targetElement)) {
+    return;
+  }
+
+  const lock = {
+    targetElement,
+    options: options || {}
+  };
+
+  locks = [...locks, lock];
+
+  if (isIosDevice) {
+    setPositionFixed();
+  } else {
+    setOverflowHidden(options);
+  }
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = event => {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        initialClientY = event.targetTouches[0].clientY;
+      }
+    };
+    targetElement.ontouchmove = event => {
+      if (event.targetTouches.length === 1) {
+        // detect single touch.
+        handleScroll(event, targetElement);
+      }
+    };
+
+    if (!documentListenerAdded) {
+      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = true;
+    }
+  }
+};
+
+export const clearAllBodyScrollLocks = () => {
+  if (isIosDevice) {
+    // Clear all locks ontouchstart/ontouchmove handlers, and the references.
+    locks.forEach(lock => {
+      lock.targetElement.ontouchstart = null;
+      lock.targetElement.ontouchmove = null;
+    });
+
+    if (documentListenerAdded) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+
+    // Reset initial clientY.
+    initialClientY = -1;
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+
+  locks = [];
+};
+
+export const enableBodyScroll = targetElement => {
+  if (!targetElement) {
+    // eslint-disable-next-line no-console
+    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');
+    return;
+  }
+
+  locks = locks.filter(lock => lock.targetElement !== targetElement);
+
+  if (isIosDevice) {
+    targetElement.ontouchstart = null;
+    targetElement.ontouchmove = null;
+
+    if (documentListenerAdded && locks.length === 0) {
+      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);
+      documentListenerAdded = false;
+    }
+  }
+
+  if (isIosDevice) {
+    restorePositionSetting();
+  } else {
+    restoreOverflowSetting();
+  }
+};
+

package/lib/esm/ModalDialog/plugins/BSL/index.ts

@@ -0,0 +1,2 @@
+export { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from './bodyScrollLock.es6';
+

package/lib/esm/ModeSwitch/index.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+
+type ModeSwitchProps = {
+    triggerClassName?: string;
+    /** The name of the local storage */
+    localStorageName?: string;
+    /** Style name for dark mode */
+    darkClassName?: string;
+    /** Set the light icon */
+    lightIcon?: React.ReactNode | string;
+    /** Set the dark icon */
+    darkIcon?: React.ReactNode | string;
+    /** -- */
+    tabIndex?: number;
+    onChange?: (e: any, param: boolean) => void;
+};
+
+
+const ModeSwitch = (props: ModeSwitchProps) => {
+    const {
+        triggerClassName,
+        localStorageName,
+        darkClassName,
+        lightIcon,
+        darkIcon,
+        tabIndex,
+        onChange
+    } = props;
+
+    const darkBtnRef = useRef<any>(null);
+    const lightBtnRef = useRef<any>(null);
+    const [isDark, setIsDark] = useState<boolean>(false);
+    const _darkClassName = darkClassName ? darkClassName : 'dark-mode';
+    const _localStorageName = localStorageName ? localStorageName : 'SITE_THEME_MODE';
+
+    function handleClick(e) {
+        e.preventDefault();
+        setIsDark(!isDark);
+
+        if (!isDark) {
+            document.body.classList.add(_darkClassName);
+            localStorage.setItem(_localStorageName, _darkClassName);
+
+        } else {
+            document.body.classList.remove(_darkClassName);
+            localStorage.removeItem(_localStorageName);
+        }
+
+        //
+        onChange?.(e, !isDark);
+
+    }
+
+    useEffect(() => {
+
+        const modeName = localStorage.getItem(_localStorageName);
+        if (modeName !== null) {
+            document.body.classList.add(modeName);
+            setIsDark(true);
+        }
+
+    }, []);
+
+    return (
+        <>
+
+            <a className={triggerClassName ? triggerClassName : ''} tabIndex={tabIndex || -1} href="#" onClick={handleClick} >
+                <span ref={darkBtnRef} style={{ display: !isDark ? 'inline-block' : 'none' }}>{darkIcon || <>
+                    <svg fill="#fff" width="26px" height="26px" viewBox="0 0 35 35"><path stroke="#000" strokeWidth="2" d="M10.895 7.574c0 7.55 5.179 13.67 11.567 13.67 1.588 0 3.101-0.38 4.479-1.063-1.695 4.46-5.996 7.636-11.051 7.636-6.533 0-11.83-5.297-11.83-11.83 0-4.82 2.888-8.959 7.023-10.803-0.116 0.778-0.188 1.573-0.188 2.39z"></path></svg>
+                </>}</span>
+                <span ref={lightBtnRef} style={{ display: isDark ? 'inline-block' : 'none' }}>{lightIcon || <>
+                    <svg fill="#fff" height="26px" width="26px" viewBox="0 0 207.628 207.628"><circle cx="103.814" cy="103.814" r="45.868"/><path d="M103.814,157.183c-29.427,0-53.368-23.941-53.368-53.368s23.941-53.368,53.368-53.368s53.368,23.941,53.368,53.368S133.241,157.183,103.814,157.183z M103.814,65.446c-21.156,0-38.368,17.212-38.368,38.368s17.212,38.368,38.368,38.368s38.368-17.212,38.368-38.368S124.97,65.446,103.814,65.446z"/><path d="M103.814,39.385c-4.142,0-7.5-3.358-7.5-7.5V7.5c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385C111.314,36.027,107.956,39.385,103.814,39.385z"/><path d="M103.814,207.628c-4.142,0-7.5-3.358-7.5-7.5v-24.385c0-4.142,3.358-7.5,7.5-7.5s7.5,3.358,7.5,7.5v24.385C111.314,204.271,107.956,207.628,103.814,207.628z"/><path d="M200.128,111.314h-24.385c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5S204.271,111.314,200.128,111.314z"/><path d="M31.885,111.314H7.5c-4.142,0-7.5-3.358-7.5-7.5s3.358-7.5,7.5-7.5h24.385c4.142,0,7.5,3.358,7.5,7.5S36.027,111.314,31.885,111.314z"/><path d="M154.676,60.452c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.242c2.929-2.929,7.678-2.93,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.242C158.515,59.72,156.595,60.452,154.676,60.452z"/><path d="M35.709,179.419c-1.919,0-3.839-0.732-5.303-2.197c-2.929-2.929-2.929-7.678,0-10.606l17.243-17.243c2.929-2.929,7.678-2.929,10.606,0c2.929,2.929,2.929,7.678,0,10.606l-17.243,17.243C39.548,178.687,37.629,179.419,35.709,179.419z"/><path d="M171.918,179.419c-1.919,0-3.839-0.732-5.303-2.197l-17.243-17.243c-2.929-2.929-2.929-7.678,0-10.606c2.929-2.929,7.678-2.929,10.606,0l17.243,17.243c2.929,2.929,2.929,7.678,0,10.606C175.757,178.687,173.838,179.419,171.918,179.419z"/><path d="M52.952,60.452c-1.919,0-3.839-0.732-5.303-2.197L30.406,41.013c-2.929-2.929-2.929-7.677,0-10.606c2.929-2.929,7.678-2.93,10.606,0l17.243,17.242c2.929,2.929,2.929,7.677,0,10.606C56.791,59.72,54.872,60.452,52.952,60.452z"/></svg>
+                </>}</span>
+            </a>
+
+        </>
+    )
+};
+
+
+export default ModeSwitch;

package/lib/esm/MultiFuncSelect/index.scss

@@ -0,0 +1,269 @@
+/* ======================================================
+    <!-- Multifunction Select -->
+/* ====================================================== */
+
+.multifunc-select__wrapper {
+
+    --multi-sel-popwin-min-width: 200px;
+    --multi-sel-focus-border-color:#86b7fe;
+    --multi-sel-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+    --multi-sel-placeholder-color: rgba(33, 37, 41, 0.75);
+    --multi-sel-input-placeholder-color: #c5c9d1;
+    --multi-sel-control-wrapper-bg: #fff;
+    --multi-sel-control-wrapper-border-color: #dee2e6;
+    --multi-sel-control-list-bg: #efefef;
+    --multi-sel-arrow-fill: #a5a5a5;
+    --multi-sel-searchbtn-fill: #a5a5a5;
+    --multi-sel-searchbtn-hover-fill: #333;
+    --multi-sel-removebtn-fill: #000;
+    --multi-sel-removebtn-hover-fill: #f00;
+
+    --multi-sel-listgroup-tool-bg: rgb(248,249,250);
+    --multi-sel-listgroup-checkbox: #a5a5a5;
+    --multi-sel-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
+
+
+    /*------ Placeholder for input ------*/
+    input::placeholder {
+        color: var(--multi-sel-input-placeholder-color);
+    }
+    
+
+    /*------ Arrow ------*/
+    .arrow {
+        svg .arrow-fill-g {
+            fill: var(--multi-sel-arrow-fill);
+        }
+    }
+        
+
+    /*------ Input ------*/
+    [data-select]:focus {
+        box-shadow: none;
+        border-color: transparent;
+        outline: 0;
+    }
+
+    /*------ List ------*/
+    .list-group {
+        display: none;
+        min-width: var(--multi-sel-popwin-min-width);
+
+        .bg-light {
+            background-color: var(--multi-sel-listgroup-tool-bg) !important;
+        }
+
+        .list-group-item {
+            svg {
+                fill: transparent;
+
+                path {
+                    stroke: var(--multi-sel-listgroup-checkbox);
+                }
+            }
+
+            &.item-selected {
+                svg {
+                    fill: var(--multi-sel-listgroup-checkbox);
+
+                    path {
+                        stroke: var(--multi-sel-listgroup-checkbox);
+                    }
+                }
+            }
+
+            &:hover,
+            &:focus {
+                background-color: var(--multi-sel-listgroup-item-hover-focus-bg);
+            }
+
+            
+        }
+    }
+
+
+    &.active {
+        .list-group {
+            display: block;
+        }
+    }
+
+
+    /*------ Multiple selection ------*/
+    .multifunc-select-multi__control-select-all {
+        .btn {
+            font-size: 0.75rem;
+            padding: 0.1rem 0.5rem;
+        }
+    }
+
+    .multifunc-select-multi__wrapper {
+
+        position: absolute;
+        top: 0;
+        width: 100%;
+        pointer-events: none;
+
+
+        ul,
+        li {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+        }
+
+        .multifunc-select-multi__control-searchbtn {
+            z-index: 5;
+            pointer-events: auto;
+
+            svg,
+            path {
+                fill: var(--multi-sel-searchbtn-fill);
+            }
+
+            &:hover {
+                svg,
+                path {
+                    fill: var(--multi-sel-searchbtn-hover-fill);
+                }
+            }
+        }
+        
+        .multifunc-select-multi__control-wrapper {
+    
+            > div {
+                position: relative;
+        
+                /* bootstrap style that match ".form-control" */
+                //padding: 0.375rem 0.75rem;
+                background-color: var(--multi-sel-control-wrapper-bg);
+                background-clip: padding-box;
+                border: 1px solid var(--multi-sel-control-wrapper-border-color);
+                appearance: none;
+                border-radius: 0.375rem;
+                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+                padding-bottom: 1px;
+
+            }
+
+        }
+
+
+        ul.multifunc-select-multi__list {
+            margin-right: 1rem;
+
+            li {
+                display: inline-block;
+                margin: 5px;
+                margin-bottom: 0;
+                padding: .1rem 1.5rem .1rem 1rem;
+                font-size: 0.875rem;
+                background: var(--multi-sel-control-list-bg);
+                border-radius: 30px;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                position: relative;
+
+                &.multifunc-select-multi__list-item-placeholder {
+                    background: transparent;
+                    color: var(--multi-sel-placeholder-color);
+                    padding-left: 0.75rem;
+                    padding-right: 0;
+                    margin-left: 0;
+                    white-space: nowrap;
+
+                    &.hide {
+                        min-width: 100px;
+                    }
+                }
+                
+
+                > a {
+                    font-weight: 400;
+                    opacity: .6;
+                    font-size: 18px;
+                    line-height: 20px;
+                    position: absolute;
+                    right: 8px;
+                    top: 0;
+                    pointer-events: auto;
+
+                    path {
+                        fill: var(--multi-sel-removebtn-fill);
+                    }
+
+                    &:hover {
+                        path {
+                            fill: var(--multi-sel-removebtn-hover-fill);
+                        }
+                    }
+                }
+
+            }
+
+        }
+
+        .multifunc-select-multi__control-blinking-cursor {
+            display: inline-block;
+            color: var(--multi-sel-placeholder-color);
+
+            &.animated {
+                animation: 1s multi-sel-blink step-end infinite;
+            }
+
+            &.control-placeholder {
+                color: var(--multi-sel-input-placeholder-color);
+            }
+        }
+
+
+        @keyframes multi-sel-blink {
+            from,
+            to {
+                color: transparent;
+            }
+
+            50% {
+                color: var(--multi-sel-placeholder-color);
+            }
+        }
+
+    }
+
+
+    /*------------*/
+    [data-select]:focus {
+        cursor: text !important;
+    }
+
+    &:not(.multiple-selection) {
+        [data-select]:focus {
+            box-shadow: var(--multi-sel-focus-box-shadow);
+            border-color: var(--multi-sel-focus-border-color);
+            outline: 0;
+        }
+    }
+
+
+    &.active {
+        .list-group {
+            display: block;
+        }
+    }
+
+
+    &.focus {
+
+        .multifunc-select-multi__control-wrapper {
+            > div {
+                box-shadow: var(--multi-sel-focus-box-shadow);
+                border-color: var(--multi-sel-focus-border-color);
+                outline: 0;
+                
+            } 
+        }
+    }
+ 
+
+}
+