@dvrd/dvr-controls 1.1.13 → 1.1.15

package/index.ts

@@ -3,6 +3,7 @@
  */
 
 import './src/style/common-icons.scss';
+import './src/style/main.scss';
 import {library} from '@fortawesome/fontawesome-svg-core';
 import {fab} from '@fortawesome/free-brands-svg-icons';
 import {far} from '@fortawesome/free-regular-svg-icons';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.1.13",
+  "version": "1.1.15",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [
@@ -26,39 +26,29 @@
   },
   "dependencies": {
     "@dvrd/idate": "^1.8.8",
-    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
-    "@types/dompurify": "2.4.0",
-    "@types/js-cookie": "3.0.3",
-    "@types/lodash.defer": "^4.1.7",
-    "@types/lodash.delay": "^4.1.7",
-    "@types/lodash.isequal": "^4.5.6",
-    "@types/lodash.merge": "^4.6.7",
-    "@types/lodash.mergewith": "^4.6.7",
+    "@fortawesome/fontawesome-svg-core": "*",
+    "@fortawesome/free-brands-svg-icons": "*",
+    "@fortawesome/free-regular-svg-icons": "*",
+    "@fortawesome/free-solid-svg-icons": "*",
+    "@fortawesome/react-fontawesome": "*",
+    "@types/dompurify": "*",
+    "@types/js-cookie": "*",
     "@types/node": "18.14.0",
     "@types/react": "*",
     "@types/react-color": "3.0.13",
     "@types/react-dom": "*",
     "@types/react-router": "*",
-    "@types/uuid": "9.0.0",
-    "classnames": "2.5.1",
-    "dompurify": "3.2.4",
-    "js-cookie": "3.0.1",
-    "lodash.defer": "^4.1.0",
-    "lodash.delay": "^4.1.1",
-    "lodash.isequal": "^4.5.0",
-    "lodash.merge": "^4.6.2",
-    "lodash.mergewith": "^4.6.2",
+    "@types/uuid": "*",
+    "classnames": "*",
+    "dompurify": "*",
+    "js-cookie": "*",
     "react": "*",
     "react-color": "2.19.3",
     "react-dom": "*",
     "react-rnd": "10.4.1",
     "react-router": "*",
     "swiper": "^11.1.4",
-    "typescript": "5.6.3",
-    "uuid": "9.0.0"
+    "typescript": "*",
+    "uuid": "*"
   }
 }

package/src/js/button/style/button.scss

@@ -2,14 +2,15 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as common;
+@use '../../../style/colors';
 
 .buttonController {
   overflow: hidden;
   display: inline-block;
 
   &:not(.disabled) {
-    @include backgroundShadow;
+    @include common.backgroundShadow;
   }
 
   border-radius: .3rem;
@@ -80,11 +81,11 @@
   }
 
   &.disabled {
-    background-color: $color-gray-6 !important;
+    background-color: colors.$color-gray-6 !important;
     cursor: not-allowed;
 
     .buttonLabel {
-      color: $color-gray-2 !important;
+      color: colors.$color-gray-2 !important;
     }
   }
 

package/src/js/button/style/closeButton.scss

@@ -2,8 +2,6 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
-
 .close-button {
   cursor: pointer;
   transition: color .2s ease-in-out;

package/src/js/button/style/dvrdButton.scss

@@ -2,10 +2,10 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .dvrd-button {
-  @include backgroundShadow2;
+  @include commons.backgroundShadow2;
   padding: .7rem 1rem;
   cursor: pointer;
   transition: background-color .2s ease-in-out;

package/src/js/button/style/outlinedButton.scss

@@ -2,10 +2,10 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .outlinedButtonContainer {
-  @include borderRadius(.3rem);
+  border-radius: .3rem;
   position: relative;
   padding: .37rem 1rem;
   cursor: pointer;
@@ -46,7 +46,7 @@
   }
 
   .ripple {
-    @include borderRadius(50%);
+    border-radius: 50%;
     position: absolute;
     opacity: .7;
     width: 10%;
@@ -73,11 +73,11 @@
   }
 
   &.disabled {
-    border-color: $color-gray-6 !important;
+    border-color: colors.$color-gray-6 !important;
     cursor: not-allowed;
 
     .outlinedButtonLabel {
-      color: $color-gray-2 !important;
+      color: colors.$color-gray-2 !important;
     }
   }
 }

package/src/js/button/style/simpleButton.scss

@@ -2,9 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
-
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .dvr-simple-button {
   position: relative;
@@ -43,7 +41,7 @@
   }
 
   .ripple {
-    @include borderRadius(50%);
+    border-radius: 50%;
     position: absolute;
     opacity: .5;
     width: 10%;
@@ -66,7 +64,7 @@
   }
 
   &.primary {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
   }
 
   &.disabled {

package/src/js/carousel/DVRCarousel.tsx

@@ -4,11 +4,10 @@
 import './style/DVRCarousel.scss';
 
 import React, {MouseEventHandler} from 'react';
-import {PureComponent, ReactElement} from "react";
-import AwesomeIcon from "../icon/awesomeIcon";
-import classNames from "classnames";
-import {voidFunction} from "../util/controlUtil";
-import isEqual from 'lodash.isequal';
+import {PureComponent, ReactElement} from 'react';
+import AwesomeIcon from '../icon/awesomeIcon';
+import classNames from 'classnames';
+import {voidFunction} from '../util/controlUtil';
 
 interface Props {
     onClickNext: MouseEventHandler;
@@ -29,8 +28,8 @@ interface State {
 
 export default class DVRCarousel extends PureComponent<Props, State> {
     state: State = {
-        initialRendered: false,
-    }
+        initialRendered: false
+    };
     carousel: HTMLDivElement;
 
     getMaxWidth = (): number => {
@@ -49,14 +48,14 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
     getVisibleIndexes = (): { firstIndex: number, lastIndex: number } => {
         const {currentIndex, visibleItems, infinite, children} = this.props,
-            itemsBefore = Math.floor((visibleItems - 1) / 2), itemsAfter = Math.ceil((visibleItems - 1) / 2)
+            itemsBefore = Math.floor((visibleItems - 1) / 2), itemsAfter = Math.ceil((visibleItems - 1) / 2);
         let firstIndex = currentIndex - itemsBefore, lastIndex = currentIndex + itemsAfter;
         if (firstIndex < 0) {
             lastIndex = visibleItems - 1;
             firstIndex = 0;
         }
         if (lastIndex > children.length - 1) {
-            if (infinite) lastIndex -= (children.length - 1)
+            if (infinite) lastIndex -= (children.length - 1);
             else {
                 lastIndex = children.length - -1;
                 firstIndex = Math.max(0, lastIndex - visibleItems);
@@ -67,7 +66,7 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
     getItemContainer = (index: number): HTMLDivElement | null => {
         return document.querySelector(`div[data-name=dvr-carousel-${index}]`);
-    }
+    };
 
     getVisibleWidth = (): number => {
         const {firstIndex, lastIndex} = this.getVisibleIndexes();
@@ -99,7 +98,7 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
         }
         if (!this.state.initialRendered) this.setState({initialRendered: true});
-    }
+    };
 
     renderPrevControl = () => {
         const {showControls, onClickPrev, currentIndex, infinite} = this.props;
@@ -120,7 +119,9 @@ export default class DVRCarousel extends PureComponent<Props, State> {
     };
 
     renderItems = () => {
-        const {lazy, children} = this.props, {initialRendered} = this.state, {firstIndex, lastIndex} = this.getVisibleIndexes();
+        const {lazy, children} = this.props, {initialRendered} = this.state, {
+            firstIndex, lastIndex
+        } = this.getVisibleIndexes();
         return (
             <div className='carousel-items-container' ref={(ref: HTMLDivElement) => {
                 this.carousel = ref;
@@ -133,11 +134,11 @@ export default class DVRCarousel extends PureComponent<Props, State> {
                                  data-name={`dvr-carousel-${index}`}>
                                 {(!hidden || !lazy) && child}
                             </div>
-                        )
+                        );
                     })}
                 </div>
             </div>
-        )
+        );
     };
 
     componentDidMount = () => {
@@ -146,7 +147,8 @@ export default class DVRCarousel extends PureComponent<Props, State> {
 
     componentDidUpdate = (prevProps: Props, prevState: State) => {
         const {currentIndex, visibleItems, children} = this.props, {initialRendered} = this.state;
-        if (currentIndex !== prevProps.currentIndex || visibleItems !== prevProps.visibleItems || !isEqual(children, prevProps.children) || initialRendered !== prevState.initialRendered)
+        if (currentIndex !== prevProps.currentIndex || visibleItems !== prevProps.visibleItems || JSON.stringify(
+            children) !== JSON.stringify(prevProps.children) || initialRendered !== prevState.initialRendered)
             window.setTimeout(this.setStyle, 0);
     };
 
@@ -157,6 +159,6 @@ export default class DVRCarousel extends PureComponent<Props, State> {
                 {this.renderItems()}
                 {this.renderNextControl()}
             </div>
-        )
+        );
     };
 }

package/src/js/carousel/style/DVRCarousel.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .dvr-carousel {
   display: grid;
@@ -11,12 +11,11 @@
   justify-items: center;
 
   .carousel-control {
-    color: $color-gray-5;
+    color: colors.$color-gray-5;
     font-size: 1rem;
   }
 
   .carousel-items-container {
-    //transition: width .2s ease-in-out;
     overflow: hidden;
 
     .items-container {

package/src/js/checkbox/style/checkbox.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
+@use '../../../style/common-variables' as commons;
 
 .checkboxContainer {
   display: grid;
@@ -16,7 +17,7 @@
 
   .checkboxLabel {
     font-size: .9rem;
-    color: $color-gray-5;
+    color: colors.$color-gray-5;
     cursor: inherit;
     user-select: none;
     transition: color .2s ease;
@@ -28,7 +29,7 @@
   }
 
   .checkbox {
-    @include borderRadius(.2rem);
+    border-radius: .2rem;
     position: relative;
     height: 22px;
     width: 22px;
@@ -38,7 +39,7 @@
     box-sizing: border-box;
 
     .checkboxCheck, .checkbox-check {
-      @include centerXY;
+      @include commons.centerXY;
       top: 55%;
       font-size: .9rem;
       cursor: inherit;
@@ -61,8 +62,8 @@
     }
 
     .ripple {
-      @include centerXY;
-      @include borderRadius(50%);
+      @include commons.centerXY;
+      border-radius: 50%;
       opacity: 1;
       width: 8px;
       height: 8px;
@@ -74,7 +75,7 @@
       border-radius: 50%;
 
       .checkbox-check {
-        @include centerXY;
+        @include commons.centerXY;
         font-size: 10px;
       }
     }

package/src/js/colorPicker/style/colorPicker.scss

@@ -2,8 +2,6 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
-
 .color-picker-container {
   display: flex;
   flex-direction: column;

package/src/js/date/dvrdDatePicker.tsx

@@ -22,7 +22,6 @@ import DvrdButton from "../button/dvrdButton";
 import {generateComponentId} from "../util/componentUtil";
 import IDate from '@dvrd/idate';
 import {pad} from "../util/controlUtil";
-import defer from 'lodash.defer';
 import {Swiper, SwiperClass, SwiperSlide} from 'swiper/react';
 import {FreeMode, Mousewheel} from 'swiper/modules';
 import 'swiper/css';
@@ -356,7 +355,7 @@ function DatePicker(props: DatePickerProps) {
     useEffect(() => {
         if (open) {
             document.addEventListener('keydown', keyListener);
-            defer(addMountClass);
+            window.setTimeout(addMountClass);
             window.setTimeout(removeMountClass, 1000);
         } else {
             document.removeEventListener('keydown', keyListener);

package/src/js/date/style/dvrdDatePicker.scss

@@ -2,12 +2,14 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
+@use '../../../style/display-breakpoints' as breakpoints;
+@use '../../../style/common-variables' as commons;
 
 .dvrd-date-picker {
   display: flex;
   flex-direction: column;
-  color: $color-blue-text;
+  color: colors.$color-blue-text;
   position: relative;
 
   .field-label {
@@ -25,13 +27,13 @@
     position: relative;
     cursor: pointer;
     background-color: white;
-    color: $color-blue-text;
+    color: colors.$color-blue-text;
 
     .value {
       transition: color .1s ease-in-out;
 
       &.placeholder {
-        color: $color-gray-3;
+        color: colors.$color-gray-3;
       }
     }
 
@@ -43,21 +45,21 @@
     }
 
     &.no-mob {
-      @include break-xs {
+      @include breakpoints.break-xs {
         display: none;
       }
     }
   }
 
   .picker {
-    @include backgroundShadow2;
+    @include commons.backgroundShadow2;
     --day-size: 26px;
     background-color: white;
     display: grid;
     grid-template-columns: 1fr;
     width: calc(var(--day-size) * 7 + .5rem * 6 + 1rem);
     max-width: 100vw;
-    color: $color-blue-text;
+    color: colors.$color-blue-text;
 
     .switcher, .current-date-container, .days-container, .today-container, .actions-container {
       padding: .5rem;
@@ -94,7 +96,7 @@
         user-select: none;
 
         &:hover {
-          color: $color-gray-7;
+          color: colors.$color-gray-7;
         }
       }
 
@@ -127,16 +129,16 @@
 
       .current-date-label {
         font-size: .9rem;
-        color: $color-gray-3;
+        color: colors.$color-gray-3;
       }
 
       .tooltip-container {
-        @include centerY;
+        @include commons.centerY;
         position: absolute;
         right: .5rem;
 
         .tooltip-icon {
-          color: $color-gray-3;
+          color: colors.$color-gray-3;
           font-size: .8rem;
           cursor: help;
         }
@@ -156,12 +158,12 @@
           display: grid;
           grid-template-columns: auto;
           grid-row-gap: .5rem;
-          border: 1px solid $color-gray-4;
+          border: 1px solid colors.$color-gray-4;
 
           .tooltip-label {
             justify-self: center;
             font-size: .8rem;
-            color: $color-gray-3;
+            color: colors.$color-gray-3;
           }
 
           .key {
@@ -184,14 +186,14 @@
 
             .shortcut, .directive {
               font-size: .8rem;
-              color: $color-gray-3;
+              color: colors.$color-gray-3;
               white-space: nowrap;
             }
 
             .shortcut {
               font-size: .7rem;
               padding: .1rem .25rem;
-              border: 1px solid $color-gray-3;
+              border: 1px solid colors.$color-gray-3;
 
               &.text {
                 padding: 0 .25rem;
@@ -206,7 +208,7 @@
 
         &:hover {
           .tooltip {
-            @include backgroundShadow;
+            @include commons.backgroundShadow;
             visibility: visible;
             opacity: 1;
           }
@@ -243,7 +245,7 @@
         }
 
         &.pad {
-          color: $color-gray-4;
+          color: colors.$color-gray-4;
         }
 
         &.selected {
@@ -256,7 +258,7 @@
         }
 
         &.disabled {
-          color: $color-gray-4;
+          color: colors.$color-gray-4;
           background-color: unset;
           cursor: default;
         }
@@ -323,7 +325,7 @@
 
       .vizor {
         position: absolute;
-        background-color: $color-gray-4;
+        background-color: colors.$color-gray-4;
         width: 100%;
         height: 1px;
         z-index: 1;

package/src/js/dialog/style/dialog.scss

@@ -2,24 +2,27 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
+@use '../../../style/display-breakpoints' as breakpoints;
 
 .dialogContainer {
-  @include popupContainer;
-  z-index: $z-index-dialog;
+  @include commons.popupContainer;
+  z-index: commons.$z-index-dialog;
 
   &.transparent {
     background-color: transparent;
   }
 
   .dvr-dialog {
-    @include popupDialog;
-    background-color: white;
-    display: flex;
-    flex-direction: column;
-    max-width: 40rem;
-    max-height: 100%;
-    padding: 1.5rem 2rem;
+    @include commons.popupDialog;
+    & {
+      display: flex;
+      flex-direction: column;
+      max-width: 40rem;
+      max-height: 100%;
+      padding: 1.5rem 2rem;
+    }
 
     .dialogTitleContainer {
 
@@ -34,7 +37,7 @@
 
       .dialogMessage {
         margin: 0;
-        color: $color-gray-5;
+        color: colors.$color-gray-5;
       }
     }
 
@@ -53,7 +56,7 @@
       }
     }
 
-    @include break-sm-down {
+    @include breakpoints.break-sm-down {
       width: 90vw;
       box-sizing: border-box;
     }

package/src/js/fileUpload/style/fileUpload.scss

@@ -2,11 +2,11 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/colors';
 
 .dvrd-file-upload {
   border-radius: 1rem;
-  border: 1px solid $color-gray-4;
+  border: 1px solid colors.$color-gray-4;
   padding: 1rem;
   width: 50rem;
   max-width: 100dvw;