@deviceinsight/ng-ui-components 7.28.0 → 7.29.0

package/dist/style.css

@@ -1966,7 +1966,6 @@ a .di.label:active {background-color:rgba(0,0,0,.1);}
   top: 6px;
   width: 9px;
 }
-/* sr-only utility class for accessibility */
 .react-datepicker__sr-only {
   position: absolute;
   width: 1px;
@@ -2002,8 +2001,8 @@ a .di.label:active {background-color:rgba(0,0,0,.1);}
 }
 .react-datepicker--time-only .react-datepicker__time,
 .react-datepicker--time-only .react-datepicker__time-box {
-  border-bottom-left-radius: 0.3rem;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-left-radius: 0.375em;
+  border-bottom-right-radius: 0.375em;
 }
 
 .react-datepicker-popper {
@@ -2021,6 +2020,14 @@ a .di.label:active {background-color:rgba(0,0,0,.1);}
   fill: #fff;
   color: #fff;
 }
+.react-datepicker-popper--header-middle[data-placement^=bottom] .react-datepicker__triangle, .react-datepicker-popper--header-bottom[data-placement^=bottom] .react-datepicker__triangle {
+  fill: #fff;
+  color: #fff;
+}
+.react-datepicker-popper--header-bottom[data-placement^=top] .react-datepicker__triangle {
+  fill: #f0f0f0;
+  color: #f0f0f0;
+}
 
 .react-datepicker__header {
   text-align: center;
@@ -2038,9 +2045,26 @@ a .di.label:active {background-color:rgba(0,0,0,.1);}
 .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
   border-top-left-radius: 0;
 }
-.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+.react-datepicker__header:not(.react-datepicker__header--has-time-select, .react-datepicker__header--middle, .react-datepicker__header--bottom) {
   border-top-right-radius: 0.3rem;
 }
+.react-datepicker__header--middle {
+  border-top: 1px solid #aeaeae;
+  border-radius: 0;
+  margin-top: 4px;
+}
+.react-datepicker__header--bottom {
+  border-bottom: none;
+  border-top: 1px solid #aeaeae;
+  border-radius: 0 0 0.3rem 0.3rem;
+}
+
+.react-datepicker__header-wrapper {
+  position: relative;
+}
+.react-datepicker__header-wrapper .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
+  right: 2px;
+}
 
 .react-datepicker__year-dropdown-container--select,
 .react-datepicker__month-dropdown-container--select,
@@ -2052,6 +2076,25 @@ a .di.label:active {background-color:rgba(0,0,0,.1);}
   margin: 0 15px;
 }
 
+.react-datepicker__month-select,
+.react-datepicker__year-select,
+.react-datepicker__month-year-select {
+  background-color: transparent;
+  border: 1px solid #aeaeae;
+  border-radius: 0.3rem;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  margin-top: 5px;
+  padding: 2px 5px;
+}
+.react-datepicker__month-select:focus-visible,
+.react-datepicker__year-select:focus-visible,
+.react-datepicker__month-year-select:focus-visible {
+  outline: auto 1px;
+}
+
 .react-datepicker__current-month,
 .react-datepicker-time__header,
 .react-datepicker-year-header {
@@ -2141,7 +2184,7 @@ h2.react-datepicker__current-month {
 }
 
 .react-datepicker__year {
-  margin: 0.4rem;
+  margin: 0.5em;
   text-align: center;
 }
 .react-datepicker__year-wrapper {
@@ -2151,18 +2194,18 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__year .react-datepicker__year-text {
   display: inline-block;
-  width: 4rem;
+  width: 5em;
   margin: 2px;
 }
 
 .react-datepicker__month {
-  margin: 0.4rem;
+  margin: 0.5em;
   text-align: center;
 }
 .react-datepicker__month .react-datepicker__month-text,
 .react-datepicker__month .react-datepicker__quarter-text {
   display: inline-block;
-  width: 4rem;
+  width: 5em;
   margin: 2px;
 }
 
@@ -2207,7 +2250,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__time-container--with-today-button {
   display: inline;
   border: 1px solid #aeaeae;
-  border-radius: 0.3rem;
+  border-radius: 0.375em;
   position: absolute;
   right: -87px;
   top: 0;
@@ -2215,19 +2258,19 @@ h2.react-datepicker__current-month {
 .react-datepicker__time-container .react-datepicker__time {
   position: relative;
   background: white;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.375em;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
   width: 85px;
   overflow-x: hidden;
   margin: 0 auto;
   text-align: center;
-  border-bottom-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.375em;
 }
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
   list-style: none;
   margin: 0;
-  height: calc(195px + 1.7rem / 2);
+  height: calc(195px + 2.125em / 2);
   overflow-y: scroll;
   padding-right: 0;
   padding-left: 0;
@@ -2262,10 +2305,10 @@ h2.react-datepicker__current-month {
 .react-datepicker__week-number {
   color: #ccc;
   display: inline-block;
-  width: 1.7rem;
-  line-height: 1.7rem;
+  width: 2.125em;
+  line-height: 2.125em;
   text-align: center;
-  margin: 0.166rem;
+  margin: 0.208em;
 }
 .react-datepicker__week-number.react-datepicker__week-number--clickable {
   cursor: pointer;
@@ -2298,10 +2341,10 @@ h2.react-datepicker__current-month {
 .react-datepicker__time-name {
   color: #000;
   display: inline-block;
-  width: 1.7rem;
-  line-height: 1.7rem;
+  width: 2.125em;
+  line-height: 2.125em;
   text-align: center;
-  margin: 0.166rem;
+  margin: 0.208em;
 }
 .react-datepicker__day-name--disabled,
 .react-datepicker__day--disabled,
@@ -2519,7 +2562,7 @@ h2.react-datepicker__current-month {
 }
 .react-datepicker__input-container .react-datepicker__calendar-icon {
   position: absolute;
-  padding: 0.5rem;
+  padding: 0.625em;
   box-sizing: content-box;
 }
 
@@ -2685,30 +2728,12 @@ h2.react-datepicker__current-month {
   display: flex;
   z-index: 2147483647;
 }
-.react-datepicker__portal .react-datepicker__day-name,
-.react-datepicker__portal .react-datepicker__day,
-.react-datepicker__portal .react-datepicker__time-name {
-  width: 3rem;
-  line-height: 3rem;
-}
-@media (max-width: 400px), (max-height: 550px) {
-  .react-datepicker__portal .react-datepicker__day-name,
-  .react-datepicker__portal .react-datepicker__day,
-  .react-datepicker__portal .react-datepicker__time-name {
-    width: 2rem;
-    line-height: 2rem;
-  }
-}
-.react-datepicker__portal .react-datepicker__current-month,
-.react-datepicker__portal .react-datepicker-time__header {
-  font-size: 1.44rem;
-}
 
 .react-datepicker__children-container {
-  width: 13.8rem;
-  margin: 0.4rem;
-  padding-right: 0.2rem;
-  padding-left: 0.2rem;
+  width: 17.25em;
+  margin: 0.5em;
+  padding-right: 0.25em;
+  padding-left: 0.25em;
   height: auto;
 }
 
@@ -2729,6 +2754,10 @@ h2.react-datepicker__current-month {
   height: 1em;
   vertical-align: -0.125em;
 }
+
+.react-datepicker-popper-offset {
+  margin-top: -0.7em;
+}
 /**
 * CS NG
 * React Datepicker

package/dist/types/components/upload/FileUpload.stories.d.ts

@@ -4,6 +4,18 @@ declare const meta: Meta<typeof FileUpload>;
 export default meta;
 export declare const BasicUpload: {
     args: {
+        dropHint: {
+            id: string;
+            defaultValue: string;
+        };
+        hoverHint: {
+            id: string;
+            defaultValue: string;
+        };
+        rejectHint: {
+            id: string;
+            defaultValue: string;
+        };
         onRemoveFile: import("@vitest/spy").Mock<(...args: any[]) => any>;
         onSelectFile: import("@vitest/spy").Mock<(...args: any[]) => any>;
         previewComponent: ({ file, onRemoveFile }: import("./FileUpload").PreviewComponentProps) => import("react").JSX.Element;
@@ -11,6 +23,18 @@ export declare const BasicUpload: {
 };
 export declare const UploadAndDownload: {
     args: {
+        dropHint: {
+            id: string;
+            defaultValue: string;
+        };
+        hoverHint: {
+            id: string;
+            defaultValue: string;
+        };
+        rejectHint: {
+            id: string;
+            defaultValue: string;
+        };
         onRemoveFile: () => void;
         onSelectFile: () => void;
         previewComponent: ({ file, onRemoveFile, onDownloadFile }: import("./FileUpload").PreviewComponentProps) => import("react").JSX.Element;
@@ -18,9 +42,51 @@ export declare const UploadAndDownload: {
 };
 export declare const MultipleUploadAndDownload: {
     args: {
+        dropHint: {
+            id: string;
+            defaultValue: string;
+        };
+        hoverHint: {
+            id: string;
+            defaultValue: string;
+        };
         multiple: true;
         onChange: import("@vitest/spy").Mock<(...args: any[]) => any>;
         previewComponent: ({ file, onRemoveFile, onDownloadFile }: import("./FileUpload").PreviewComponentProps) => import("react").JSX.Element;
     };
 };
+export declare const AcceptedFileTypes: {
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+    args: {
+        accept: {
+            'image/svg+xml': string[];
+        };
+        dropHint: {
+            id: string;
+            defaultValue: string;
+        };
+        hoverHint: {
+            id: string;
+            defaultValue: string;
+        };
+        acceptHint: {
+            id: string;
+            defaultValue: string;
+        };
+        rejectHint: {
+            id: string;
+            defaultValue: string;
+        };
+        onRemoveFile: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onSelectFile: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        onDropRejected: import("@vitest/spy").Mock<(...args: any[]) => any>;
+        previewComponent: ({ file, onRemoveFile }: import("./FileUpload").PreviewComponentProps) => import("react").JSX.Element;
+    };
+};
 //# sourceMappingURL=FileUpload.stories.d.ts.map

package/dist/types/components/upload/FileUpload.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/FileUpload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAE3C,OAAO,UAAU,MAAM,cAAc,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAC;eACa,IAAI;AAEnB,eAAO,MAAM,WAAW;;;;;;CAavB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;CAsB7B,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;;;;CAsBrC,CAAC"}
+{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/FileUpload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAE3C,OAAO,UAAU,MAAM,cAAc,CAAC;AAItC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAGjC,CAAC;eACa,IAAI;AAwBnB,eAAO,MAAM,WAAW;;;YAnBtB,EAAE;YACF,YAAY;;;YAGZ,EAAE;YACF,YAAY;;;YAEA,EAAE;YAAkC,YAAY;;;;;;CA0B7D,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;YAnC5B,EAAE;YACF,YAAY;;;YAGZ,EAAE;YACF,YAAY;;;YAEA,EAAE;YAAkC,YAAY;;;;;;CAmD7D,CAAC;AAEF,eAAO,MAAM,yBAAyB;;;YAhD1B,EAAE;YAAkC,YAAY;;;YAE1D,EAAE;YACF,YAAY;;;;;;CAoEb,CAAC;AAEF,eAAO,MAAM,iBAAiB;;QAE5B,IAAI;YACH,WAAW;gBACV,KAAK;;;;;;YAKE,eAAe;;;YACb,EAAE;YAA6B,YAAY;;;YAErD,EAAE;YACF,YAAY;;;YAEA,EAAE;YAA+B,YAAY;;;YAC7C,EAAE;YAA+B,YAAY;;;;;;;CAa3D,CAAC"}

package/dist/types/components/upload/ImageUpload.stories.d.ts

@@ -4,8 +4,32 @@ import ImageUpload from './ImageUpload';
 declare const meta: {
     title: string;
     component: typeof ImageUpload;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     args: {
         imageUrl: string;
+        dropHint: {
+            id: string;
+            defaultValue: string;
+        };
+        hoverHint: {
+            id: string;
+            defaultValue: string;
+        };
+        acceptHint: {
+            id: string;
+            defaultValue: string;
+        };
+        rejectHint: {
+            id: string;
+            defaultValue: string;
+        };
+        onDropRejected: import("@vitest/spy").Mock<(...args: any[]) => any>;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         accept?: import("react-dropzone").Accept;

package/dist/types/components/upload/ImageUpload.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/ImageUpload.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AACrD,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,QAAA,MAAM,IAAI;;;;QAIR,QAAQ;;;;;;;;;;;;;;;;;;;CAS0B,CAAC;eAEtB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC"}
+{"version":3,"file":"ImageUpload.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/ImageUpload.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,KAAK,EAAO,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AACrD,OAAO,WAAW,MAAM,eAAe,CAAC;AAExC,QAAA,MAAM,IAAI;;;;QAIR,IAAI;YACH,WAAW;gBACV,SAAS;;;;;QAMX,QAAQ;QACR,QAAQ;YACP,EAAE;YACF,YAAY;;QAEb,SAAS;YACR,EAAE;YACF,YAAY;;QAEb,UAAU;YAAG,EAAE;YAA4B,YAAY;;QACvD,UAAU;YACT,EAAE;YACF,YAAY;;QAEb,cAAc;;;;;;;;;;;;;;;;;;;CASoB,CAAC;eAEtB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAgBnC,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAM/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@deviceinsight/ng-ui-components",
-	"version": "7.28.0",
+	"version": "7.29.0",
 	"private": false,
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -41,8 +41,8 @@
 		"build-storybook": "storybook build"
 	},
 	"dependencies": {
-		"@deviceinsight/ng-ui-api-client": "^10.61.0",
-		"@deviceinsight/ng-ui-basic-components": "^7.25.0",
+		"@deviceinsight/ng-ui-api-client": "^10.62.0",
+		"@deviceinsight/ng-ui-basic-components": "^7.26.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -52,14 +52,14 @@
 		"classnames": "^2.5.1",
 		"date-fns": "^4.4.0",
 		"dayjs": "^1.11.23",
-		"highcharts": "^12.6.2",
+		"highcharts": "^13.1.1",
 		"highcharts-react-official": "^3.2.3",
 		"lodash": "^4.18.1",
 		"nanoid": "^6.0.2",
 		"pure-color": "^1.3.0",
 		"react-colorful": "^5.8.1",
-		"react-datepicker": "^8.10.0",
-		"react-dropzone": "^14.4.1",
+		"react-datepicker": "^9.1.0",
+		"react-dropzone": "^20.1.3",
 		"react-select": "^5.10.2",
 		"react-select-async-paginate": "^0.7.11",
 		"react-toastify": "^11.1.0"
@@ -72,7 +72,7 @@
 		"react-router-dom": "^5.3.4"
 	},
 	"devDependencies": {
-		"@storybook/react-vite": "10.6.2",
+		"@storybook/react-vite": "10.6.3",
 		"@testing-library/dom": "10.4.2",
 		"@testing-library/jest-dom": "7.0.1",
 		"@testing-library/react": "16.3.3",
@@ -83,7 +83,7 @@
 		"@types/react-dom": "19.3.0",
 		"@types/react-router-dom": "5.3.3",
 		"@vitejs/plugin-react": "6.1.2",
-		"happy-dom": "20.14.6",
+		"happy-dom": "21.0.1",
 		"husky": "9.1.7",
 		"i18next": "26.5.3",
 		"lint-staged": "17.6.0",
@@ -95,7 +95,7 @@
 		"react-i18next": "17.1.0",
 		"react-router-dom": "5.3.4",
 		"rimraf": "6.1.3",
-		"storybook": "10.6.2",
+		"storybook": "10.6.3",
 		"tsc-watch": "7.2.1",
 		"typescript": "7.0.2",
 		"vite": "8.3.4",
@@ -116,6 +116,6 @@
 		]
 	},
 	"engines": {
-		"node": "^24.22.0"
+		"node": "^24.22.1"
 	}
 }