@dvrd/dvr-controls 1.1.13 → 1.1.15

package/src/js/navigation/style/mobileNavigation.scss

@@ -2,14 +2,11 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-mobile-navigation {
-  @media(min-width: 750px) {
-    display: none;
-  }
-
-  color: $color-blue-text;
+  color: colors.$color-blue-text;
   position: fixed;
   z-index: 2000;
 
@@ -22,11 +19,14 @@
     padding: .5rem; // For better UX, makes the touch surface bigger
 
     .mobile-navigation-icon {
-      @include backgroundShadow2;
-      font-size: 2rem;
-      padding: .25rem;
-      background-color: white;
-      border-radius: .5rem;
+      @include commons.backgroundShadow2;
+
+      & {
+        font-size: 2rem;
+        padding: .25rem;
+        background-color: white;
+        border-radius: .5rem;
+      }
     }
   }
 
@@ -39,18 +39,21 @@
   }
 
   .mobile-navigation-container {
-    @include backgroundShadow3($borderRadius: 0);
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100dvh;
-    max-width: 100dvw;
-    overflow-y: auto;
-    background-color: white;
-    transform: translateX(-100%);
-    transition: transform .2s ease-in-out;
-    display: grid;
-    grid-template-rows: fit-content(100%) 1fr fit-content(100%);
+    @include commons.backgroundShadow3($borderRadius: 0);
+
+    & {
+      position: fixed;
+      top: 0;
+      left: 0;
+      height: 100dvh;
+      max-width: 100dvw;
+      overflow-y: auto;
+      background-color: white;
+      transform: translateX(-100%);
+      transition: transform .2s ease-in-out;
+      display: grid;
+      grid-template-rows: fit-content(100%) 1fr fit-content(100%);
+    }
 
     .mobile-navigation-close {
       position: sticky;
@@ -71,7 +74,7 @@
         font-size: 1.1rem;
 
         &.active {
-          color: $color-blue-1;
+          color: colors.$color-blue-1;
           font-weight: 500;
         }
       }
@@ -89,4 +92,8 @@
       transform: none;
     }
   }
+
+  @media(min-width: 750px) {
+    display: none;
+  }
 }

package/src/js/optionsList/style/dvrdOptionsList.scss

@@ -2,13 +2,14 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .dvrd-options-list {
   position: relative;
 
   .btn-container {
-    @include backgroundShadow2;
+    @include commons.backgroundShadow2;
     border-radius: .5rem;
     padding: .7rem 1rem;
     display: grid;
@@ -43,7 +44,7 @@
     .option {
       padding: .5rem;
       cursor: pointer;
-      border-bottom: 1px solid $color-gray-4;
+      border-bottom: 1px solid colors.$color-gray-4;
       transition: background-color .2s ease-in-out;
 
       .option-label {
@@ -57,7 +58,7 @@
 
       &:hover {
         &.default {
-          background-color: rgba($color-blue-1, .2);
+          background-color: rgba(colors.$color-blue-1, .2);
         }
 
         &.red {
@@ -69,7 +70,7 @@
 
   &.open, &.hover:hover {
     .options-container {
-      @include backgroundShadow();
+      @include commons.backgroundShadow;
       visibility: visible;
       opacity: 1;
     }

package/src/js/optionsMenu/style/optionsMenu.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .option-menu-container {
   display: flex;
@@ -24,14 +25,14 @@
   }
 
   .menu-options-list {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     position: fixed;
     display: flex;
     flex-direction: column;
     visibility: hidden;
     opacity: 0;
     transition: visibility .2s ease-in-out, opacity .2s ease-in-out;
-    z-index: $z-index-dialog;
+    z-index: commons.$z-index-dialog;
 
     .menu-option {
       display: flex;
@@ -50,14 +51,14 @@
       }
 
       &:hover {
-        background-color: $color-gray-7;
+        background-color: colors.$color-gray-7;
       }
 
       &.disabled {
         cursor: not-allowed;
 
         .menu-option-label {
-          color: $color-gray-3;
+          color: colors.$color-gray-3;
         }
       }
     }

package/src/js/pdf/element/style/pdfElement.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/common-variables' as commons;
+@use '../../../../style/colors';
 
 .pdf-draggable {
   outline: 2px solid transparent;
@@ -14,7 +15,7 @@
     left: -2px;
     width: calc(100% + 4px);
     transform: translateY(-100%);
-    background-color: $color-gray-5;
+    background-color: colors.$color-gray-5;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -34,7 +35,7 @@
       }
 
       &:hover {
-        color: $color-gray-4;
+        color: colors.$color-gray-4;
 
         &.delete {
           color: red;
@@ -47,7 +48,7 @@
       align-items: center;
 
       .action {
-        border-right: 1px solid $color-gray-5;
+        border-right: 1px solid colors.$color-gray-5;
 
         &:last-child {
           border-right: none;
@@ -62,7 +63,7 @@
 
     .guide {
       position: absolute;
-      background-color: $color-gray-4;
+      background-color: colors.$color-gray-4;
       top: 0;
       left: 0;
 
@@ -92,8 +93,8 @@
   }
 
   &:hover, &.focused {
-    outline-color: $color-gray-5;
-    z-index: $z-index-high;
+    outline-color: colors.$color-gray-5;
+    z-index: commons.$z-index-high;
     background-color: white;
 
     .action-bar {

package/src/js/pdf/image/pdfImage.tsx

@@ -9,7 +9,6 @@ import {
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
 import {nullify} from "../../util/miscUtil";
-import merge from 'lodash.merge';
 import {AwesomeIcon, directTimeout, PAGE_HEIGHT, PAGE_WIDTH} from "../../../../index";
 
 interface Props {
@@ -42,12 +41,13 @@ export default class PdfImage extends PdfElement<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            settings: merge({}, {
-                img: props.values?.default_image || '',
+            settings: {
                 persistent: PDFElementPersist.NOT_PERSISTENT,
                 alignment: undefined,
                 display: PDFDisplay.ALL_PAGES,
-            }, props.defaultSettings),
+                ...props.defaultSettings,
+                img: (props.defaultSettings?.img ?? (props.values?.default_image || '')) as string,
+            },
             dragging: false,
         };
     };

package/src/js/pdf/image/style/pdfImage.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .pdf-image {
   width: 100%;
@@ -15,8 +15,8 @@
 
   .img-selector {
     padding: 2rem;
-    border: 2px dashed $color-gray-3;
-    color: $color-gray-3;
+    border: 2px dashed colors.$color-gray-3;
+    color: colors.$color-gray-3;
     display: flex;
     flex-direction: column;
     align-items: center;

package/src/js/pdf/invoiceTable/pdfInvoiceTable.tsx

@@ -9,7 +9,6 @@ import {
     PDFElementParams, PDFElementPersist, PDFElementType, PdfFont, PDFInvoiceTableParams
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
-import merge from 'lodash.merge';
 import {parsePrice, pxToPt} from "../../util/pdfUtil";
 import {WithEvents} from "../../../../index";
 
@@ -37,7 +36,7 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            settings: merge({}, {
+            settings: {
                 widths: [40, 20, 20, 20],
                 fontSize: 12,
                 font: props.mainFont,
@@ -45,7 +44,8 @@ export default class PdfInvoiceTable extends PdfElement<Props, State> {
                 headerColor: '#000',
                 alignment: ElementPosition.CENTER,
                 persistent: PDFElementPersist.NOT_PERSISTENT,
-            }, props.defaultSettings),
+                ...props.defaultSettings
+            },
             dragging: false,
         };
     }

package/src/js/pdf/invoiceTable/style/pdfInvoiceTable.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .pdf-invoice-table {
   .invoice-line {
@@ -18,7 +18,7 @@
     }
 
     .light {
-      color: $color-gray-3;
+      color: colors.$color-gray-3;
     }
 
     .fl {

package/src/js/pdf/settings/buttons/style/iconButton.scss

@@ -2,7 +2,7 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/colors';
 
 .icon-button {
   display: inline-flex;
@@ -10,11 +10,11 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  background-color: $color-gray-7;
+  background-color: colors.$color-gray-7;
   width: 34px;
   height: 34px;
   transition: background-color .2s ease-in-out;
-  border-right: 1px solid $color-gray-4;
+  border-right: 1px solid colors.$color-gray-4;
 
   .icon-container {
     display: inline-flex;
@@ -37,11 +37,11 @@
   }
 
   &:hover {
-    background-color: $color-gray-4;
+    background-color: colors.$color-gray-4;
   }
 
   &.active {
-    background-color: $color-blue-1;
+    background-color: colors.$color-blue-1;
   }
 
   &:last-child {

package/src/js/pdf/settings/image/pdfImageSettings.tsx

@@ -1,13 +1,11 @@
 /*
  * Copyright (c) 2024. Dave van Rijn Development
  */
-import './style/pdfImageSettings.scss';
-
 import React, {PureComponent} from 'react';
-import PdfImage from "../../image/pdfImage";
-import {Button, DvrdButton, DvrdSelect, ElementPosition, SelectItemShape} from "../../../../../index";
-import IconButton, {IconButtonType} from "../buttons/iconButton";
-import {PDFDisplay} from "../../../util/interfaces";
+import {DvrdButton, DvrdSelect, ElementPosition, SelectItemShape} from '../../../../../index';
+import {PDFDisplay} from '../../../util/interfaces';
+import PdfImage from '../../image/pdfImage';
+import IconButton, {IconButtonType} from '../buttons/iconButton';
 
 interface Props {
     element: PdfImage;

package/src/js/pdf/settings/invoiceTable/style/pdfInvoiceTableSettings.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/display-breakpoints' as breakpoints;
+@use '../../../../../style/colors';
 
 .pdf-invoice-table-settings {
   display: grid;
@@ -24,11 +25,11 @@
     grid-column-start: span 2;
     width: 100%;
     height: 1px;
-    background-color: $color-gray-4;
+    background-color: colors.$color-gray-4;
     margin: .5rem 0;
   }
 
-  @include break-lg-down {
+  @include breakpoints.break-lg-down {
     grid-template-columns: auto;
     grid-column-gap: 0;
 

package/src/js/pdf/settings/style/pdfElementSettings.scss

@@ -2,12 +2,12 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
+@use '../../../../style/colors';
 
 .pdf-element-settings {
   background-color: white;
   padding: 1rem;
-  border: 1px solid $color-gray-7;
+  border: 1px solid colors.$color-gray-7;
   border-radius: .5rem;
   max-width: 30rem;
 
@@ -22,7 +22,7 @@
   .divider {
     width: 100%;
     height: 1px;
-    background-color: $color-gray-4;
+    background-color: colors.$color-gray-4;
     margin: .5rem 0;
   }
 

package/src/js/pdf/settings/text/style/pdfTextSettings.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../../style/variables';
+@use '../../../../../style/common-variables' as commons;
+@use '../../../../../style/colors';
 
 .pdf-text-settings {
   display: grid;
@@ -43,7 +44,7 @@
         flex-direction: column;
 
         .variables-title {
-          border-bottom: 2px solid $color-gray-4;
+          border-bottom: 2px solid colors.$color-gray-4;
           cursor: pointer;
           padding: .5rem .25rem;
           font-weight: 500;
@@ -61,7 +62,7 @@
             align-items: flex-start;
 
             .text-variable {
-              @include backgroundShadow;
+              @include commons.backgroundShadow;
               padding: .2rem .4rem;
               border-radius: .5rem;
               cursor: pointer;
@@ -76,7 +77,7 @@
               }
 
               &:hover {
-                background-color: $color-gray-7;
+                background-color: colors.$color-gray-7;
               }
             }
           }

package/src/js/pdf/style/pdfTemplateCreator.scss

@@ -2,7 +2,8 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
+@use '../../../style/colors';
 
 .pdf-creator {
   margin: 2rem auto;
@@ -26,11 +27,11 @@
     padding: 1rem;
     position: sticky;
     top: 4rem;
-    border: 1px solid $color-gray-7;
+    border: 1px solid colors.$color-gray-7;
     border-radius: .5rem;
 
     .element-button {
-      @include backgroundShadow;
+      @include commons.backgroundShadow;
       border-radius: .5rem;
       cursor: pointer;
       transition: background-color .2s ease-in-out;
@@ -38,7 +39,7 @@
       grid-template-columns: 2rem 1fr;
       grid-column-gap: 1rem;
       align-items: center;
-      color: $color-gray-5;
+      color: colors.$color-gray-5;
       padding: .5rem;
 
       .element-label {
@@ -50,7 +51,7 @@
       }
 
       &:hover {
-        background-color: $color-gray-6;
+        background-color: colors.$color-gray-6;
       }
     }
 
@@ -60,7 +61,7 @@
       grid-column-gap: 1rem;
 
       .history-button {
-        @include backgroundShadow;
+        @include commons.backgroundShadow;
         border-radius: .5rem;
         cursor: pointer;
         transition: background-color .2s ease-in-out;
@@ -68,17 +69,17 @@
         text-align: center;
 
         &:hover {
-          background-color: $color-gray-7;
+          background-color: colors.$color-gray-7;
         }
 
         &.disabled {
           cursor: not-allowed;
           background-color: white !important;
           box-shadow: none;
-          border: 1px solid $color-gray-4;
+          border: 1px solid colors.$color-gray-4;
 
           .history-icon {
-            color: $color-gray-4;
+            color: colors.$color-gray-4;
           }
         }
       }
@@ -91,7 +92,7 @@
   }
 
   .pdf-paper {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     border-radius: .5rem;
     width: 595pt;
     height: 842pt;
@@ -102,7 +103,7 @@
   }
 
   .footer-container {
-    @include backgroundShadow;
+    @include commons.backgroundShadow;
     border-radius: .5rem;
     grid-column: 2;
     padding: 1rem;

package/src/js/pdf/text/pdfText.tsx

@@ -17,7 +17,6 @@ import {
 } from "../../util/interfaces";
 import {PDFDraggable, PdfElement} from "../element/pdfElement";
 import {debug, sanitizeHtml} from "../../util/miscUtil";
-import merge from 'lodash.merge';
 import {PAGE_WIDTH, pxToPt, setPdfVariables, waitForFonts} from "../../util/pdfUtil";
 import {directTimeout} from "../../util/componentUtil";
 import {dispatchCustomEvent, showDialog} from "../../util/eventUtil";
@@ -57,7 +56,7 @@ export default class PdfText extends PdfElement<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {
-            settings: merge({}, {
+            settings: {
                 text: 'Klik hier om deze tekst aan te passen.',
                 bold: false,
                 underline: false,
@@ -68,7 +67,8 @@ export default class PdfText extends PdfElement<Props, State> {
                 color: '#000',
                 persistent: PDFElementPersist.NOT_PERSISTENT,
                 display: PDFDisplay.ALL_PAGES,
-            }, props.defaultSettings),
+                    ...props.defaultSettings
+            },
             dragging: false,
             focused: false,
         }

package/src/js/pdf/text/style/pdfText.scss

@@ -2,8 +2,6 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../../style/variables';
-
 .pdf-text-container {
   .pdf-text-input {
     border: none !important;

package/src/js/pdf/v2/pdfElement/pdfDraggableElement.tsx

@@ -16,8 +16,6 @@ import React, {
 import {ElementPosition, PDFElementPersist, RNDDimensions} from "../../../util/interfaces";
 import {generateComponentId} from "../../../util/componentUtil";
 import {DraggableData, HandleStyles, Position, ResizableDelta, ResizeEnable, Rnd, RndDragCallback} from 'react-rnd';
-import defer from 'lodash.defer';
-import delay from 'lodash.delay';
 import {PDFDraggableType, ResizeDirection} from "../types/pdfTemplateTypes";
 import {PAGE_WIDTH} from "../../../util/pdfUtil";
 import classNames from 'classnames';
@@ -95,7 +93,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
     function setSize(width: number, height: number, notifyResized: boolean = true) {
         setDimensions({width, height});
         if (notifyResized)
-            defer(props.onResized);
+            window.setTimeout(props.onResized);
     }
 
     function setFocus() {
@@ -104,7 +102,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
 
     function setPosition(_position: Position, callback?: VoidFunction) {
         _setPosition(Object.assign({}, position, _position));
-        if (callback) defer(callback);
+        if (callback) window.setTimeout(callback);
     }
 
     function getPosition(): Position {
@@ -129,7 +127,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
     function onResizeStop(evt: any, direction: ResizeDirection, ref: HTMLElement, delta: ResizableDelta, position: Position) {
         setDimensions({width: ref.style.width, height: ref.style.height});
         _setPosition(position);
-        defer(props.onResized);
+        window.setTimeout(props.onResized);
     }
 
     function setInitialPosition() {
@@ -153,7 +151,7 @@ function PDFDraggableElement(props: PropsWithChildren<Props>, ref: ForwardedRef<
     }));
 
     useEffect(() => {
-        delay(setInitialPosition, 20);
+        window.setTimeout(setInitialPosition, 20);
     }, [props.alignment]);
 
     const axis = props.alignment ? 'y' : 'both';

package/src/js/popup/style/withBackground.scss

@@ -2,14 +2,14 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-@import '../../../style/variables';
+@use '../../../style/common-variables' as commons;
 
 .with-background {
-  @include popupContainer;
+  @include commons.popupContainer;
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: $z-index-dialog;
+  z-index: commons.$z-index-dialog;
 
   .content-container {
     width: fit-content;