@deviceinsight/ng-ui-basic-components 3.13.0-SNAPSHOT

package/LICENSE

@@ -0,0 +1 @@
+(c) Copyright Device Insight GmbH, all rights reserved.

package/README.md

@@ -0,0 +1,102 @@
+# General
+
+This project contains basic components and custom projects.
+
+# Linking for local development
+
+We recommend using `yalc` tool for linking `ng-ui-basic-components`. It's because `yalc` generates exactly the same package as
+it would be published to the npm registry, especially it removes files that should be ignored and their existence cause
+problems when we use `yarn link`.
+
+Here's how to do the linking:
+
+```shell
+yarn link-local
+
+# in the project where you want to link this library to:
+yalc link "@deviceinsight/ng-ui-basic-components"
+```
+
+# Releasing the library using git flow
+
+## Prerequisites
+
+### git flow
+
+The git flow tools need to be installed. This depends on your operating system.
+
+They can be also installed from the git repo: https://github.com/petervanderdoes/gitflow-avh
+
+After git flow is installed, the repo needs to be initialized. Run `git flow init` and answer every
+question with the default (press Enter/Return).
+
+## Building a release
+
+To build a release of this library, execute `./release.sh`, which consists of the following steps:
+
+### Before the release: Check for vulnerabilities and run the tests
+
+Vulnerabilities can occur at any time.
+To be sure, the pipeline for the branches and the tags created
+in the release process will not fail, it is wise to run the checks locally before building the
+release.
+To do this, run:
+
+```
+npm install
+npm run scan
+npm run test
+```
+
+### Building the release
+
+1. Switch to develop branch and make sure both main and develop are current:
+
+`git checkout develop && git pull && git fetch origin main:main`
+
+2. Get the upcoming release from `package.json` and start the release:
+
+`git flow release start $RELEASE_VERSION`, e.g. `git flow release start 1.2.0`.
+
+3. Edit the version in `package.json`.
+
+3.1. Edit the version in `package.json`, remove the `-SNAPSHOT`.
+
+3.2. Commit `package.json`. Commit message should be `Release $RELEASE_VERSION`, e.g. `Release 1.2.0`.
+
+4. Finish the release:
+
+`git flow release finish`
+
+This will merge the release branch into the `main` branch and create a tag. It will also merge the release branch into the `develop` branch.
+
+After this you should be on the `develop` branch.
+
+4.1 A merge conflict might occur in `package.json` for the `version`, when main is merged into the develop branch:
+
+Resolve it by taking the version of the `develop` branch. Then run `npm install` to resolve conflicts in `package-lock.version`.
+
+Run `git status` to see if there are more conflicts. If there are, resolve them and `git add` the fixed files.
+
+If there are no more conflicts, run `git add package*` and `git commit`.
+
+5. Start a new snapshot version:
+
+5.1.
+Edit the version in `package.json`,
+increment the minor version (e.g., from `1.1.0` to `1.2.0`) and add the `-SNAPSHOT` again,
+so that the version is e.g. `1.2.0-SNAPSHOT`.
+
+5.2. Run `npm install`.
+
+5.2. Commit `package.json` and `package-lock.json`. Commit message should be `Starting $NEW_SNAPSHOT_VERSION`, e.g. `Starting 1.2.0`.
+
+6. Push the branches and the tag:
+
+On branch `develop`:
+
+`git push`
+`git checkout main`
+`git push`
+`git push --tags`
+`git checkout develop`

package/lib/cjs/__mocks__/react-i18next.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=react-i18next.d.ts.map

package/lib/cjs/__mocks__/react-i18next.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-i18next.d.ts","sourceRoot":"","sources":["../../../src/__mocks__/react-i18next.ts"],"names":[],"mappings":""}

package/lib/cjs/__mocks__/react-i18next.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+module.exports = {
+    withTranslation: () => (Component) => {
+        Component.defaultProps = {
+            ...Component.defaultProps,
+            t: (key) => key,
+            i18n: {
+                language: 'de-DE'
+            }
+        };
+        return Component;
+    },
+    Trans: ({ i18nKey, children }) => i18nKey || children,
+    useTranslation: () => ({
+        t: (key) => key
+    })
+};

package/lib/cjs/assets/search-box.css

@@ -0,0 +1,29 @@
+
+.search-box {
+	height: 32px;
+	padding: 0 30px 0 0;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	position: relative;
+	background: #fff;
+}
+
+.search-box input {
+	width: 100%;
+	height: 30px;
+	padding: 0 8px 0 15px;
+	background: none;
+	margin-top: 0;
+	border: none;
+	outline: none;
+	font-size: 12px;
+	box-shadow: none;
+	border-radius: 0;
+}
+
+.search-box .di.button {
+	position: absolute;
+	right: 0;
+	margin-right: 0;
+	padding: 7px 10px;
+}

package/lib/cjs/assets/style.css

@@ -0,0 +1,219 @@
+/**
+* CS NG
+* UI Components
+*/
+
+/* Button */
+.di.button * {vertical-align:middle;}
+.di.button {height:32px; font-size:11px; font-weight:bold; padding:0 15px; margin:0 4px 0 0; display:inline-block; color:#333; background-color:#fff; border-radius:3px; cursor:pointer; border:1px solid #ddd; border-bottom:1px solid #aaa;}
+.di.button img {opacity:0.8; margin:0;}
+.di.button img + span {margin:0 0 0 8px;}
+.di.button:hover {background-color:rgba(0,0,0,0.07);}
+.di.button:active,
+.di.button.active {background-color:rgba(0,0,0,.1);}
+.di.button.active {border:1px solid #333;}
+.di.button.small {height:24px; margin: 0 1px; padding:0 10px;}
+.di.button.link {display:inline-block; border:none; background-color:transparent; box-shadow:none; cursor:pointer;}
+.di.button.link:hover {text-decoration: none; background-color:rgba(0,0,0,.07); border-radius:3px;}
+.di.button.link:active {background-color:rgba(0,0,0,.1);}
+.di.button.primary {background-color:var(--primary-color, #1a8ed3); border:none; color:#fff; border:1px solid var(--primary-color, #1a8ed3); border-bottom:1px solid var(--primary-color-darker, #1575ad);}
+.di.button.primary:hover,
+.di.button.primary:focus,
+.di.button.primary:active {background-color:var(--primary-color-darker, #1575ad); color:#fff}
+.di.button.danger {background-color:#FF494F; border:none; color:#fff; border:1px solid #FF494F; border-bottom:1px solid #E1494F;}
+.di.button.danger:hover,
+.di.button.danger:focus,
+.di.button.danger:active {background-color:#E1494F; color:#fff;}
+.di.button:disabled,
+.di.button.disabled {opacity:0.35; cursor:default; pointer-events:none; filter:grayscale(100%)}
+
+.di.button::-moz-focus-inner {border:0; padding:0;}
+
+/* ButtonRow */
+.di.button-row {margin:30px 0 40px; display:flex;}
+.di.button-row.dividing {padding:25px 0 0; border-top:1px solid #ddd;}
+.di.button-row .button {min-width:70px;}
+
+/* Modal */
+.di.modal {position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(255, 255, 255, 0); z-index: 99999; }
+.di.modal {transition:all .15s linear; pointer-events:none;}
+.di.modal .modal-window {margin:7vh auto 0; border-radius:4px; background-color: #fff; box-shadow:0 5px 10px rgba(0,0,0,0.2); overflow:hidden;}
+.di.modal .modal-window {transition:margin .3s ease-out .2s, opacity .3s ease-out .2s; opacity:0;}
+.di.modal .modal-header {padding:20px 30px; min-height:60px; cursor: move; font-size:20px; line-height:25px; border-bottom:1px solid #ddd;}
+.di.modal .modal-content {padding:20px 30px; max-height:calc(80vh - 100px); overflow:auto; clear:both;}
+.di.modal .modal-footer {margin:0px 0 0 0; text-align:right; padding:20px 30px; border-radius:0 0 4px 4px; border-top:1px solid #ddd;}
+
+.di.modal.show {background-color:rgba(0,0,0,0.5); pointer-events:auto;}
+.di.modal.show .modal-window {margin:10vh auto 0; opacity:1;}
+
+/* Spinner */
+.di.spinner {border: 2px solid #bababa; border-top: 2px solid var(--primary-color, #1a8ed3); border-radius:50%; animation: spin 1s linear infinite; flex-shrink:0;}
+.di.spinner-wrapper {position:relative; height:100%; z-index:0;}
+.di.spinner-wrapper .spinner-container {opacity:0; transition:opacity .1s ease; background-color:rgba(255,255,255,.75);}
+.di.spinner-wrapper .spinner-container {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; visibility:hidden;}
+.di.spinner-wrapper .spinner-container.visible {opacity:1; visibility:visible;}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Checkbox */
+.di.toggle { position: relative; display: inline-block; width: 60px; height: 30px; }
+.di.toggle input { display: none; }
+.di.toggle .switch { position: absolute; background-color: grey; border-radius: 15px; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; }
+.di.toggle .switch:before { content: ''; width: 28px; height: 28px; background-color: white; position: absolute; right: 1px; top: 1px; border-radius: 14px;}
+.di.toggle .switch, .di.toggle .switch:before { transition: transform 0.1s ease-out, background-color 0.05s ease-out 0.05s; }
+.di.toggle input:checked + .switch:before { transform: translateX(0px); }
+.di.toggle input + .switch:before { transform: translateX(-30px); }
+
+.di.toggle-small { width: 40px; height: 20px; }
+.di.toggle .switch-small:before { width: 18px; height: 18px; }
+.di.toggle input + .switch-small:before { transform: translateX(-20px); }
+
+.di.checkbox { cursor: pointer; }
+.di.checkbox > input:disabled + div, .di.toggle > input:disabled + div { opacity: 0.4; cursor: auto; }
+.di.checkbox > input { display: none; }
+.di.checkbox .box, .di.checkbox .radio { display: inline-block; text-align: left; width: 16px; height: 16px; border: 1px solid black; vertical-align: middle; }
+.di.checkbox .radio { border-radius: 10px; }
+.di.checkbox input:checked + .box:before { content: '\2713'; /* checkbox tick */ left: -1px; top:0; position: relative; float: right; font-size: 14px; line-height: 14px; }
+.di.checkbox input:checked + .radio:before { content: ''; display: block; position: relative; height: 6px; width: 6px; background-color: #222; border-radius: 3px; top: 4px; left: 4px; }
+.di .textlabel { user-select: none; font-size: 12px; vertical-align: middle; padding-left: 5px; }
+
+/* Label */
+.di.label {height:22px; padding:0 10px; margin-right:6px; color: #333; border:1px solid #bbb; border-radius:20px; display:inline-flex; align-items:center; font-size:12px; white-space:nowrap;}
+
+.di.label.removable {padding-right:0}
+.di.label .remove {margin:0 2px 0 8px; width:18px; height:18px; display:flex; justify-content: center; align-items: center;}
+.di.label .remove {background-color:rgba(0,0,0,0.3); border-radius:50%; cursor:pointer;}
+.di.label .remove:hover {background-color:rgba(0,0,0,0.5);}
+.di.label .remove:active {background-color:rgba(0,0,0,0.7);}
+.di.label .remove img {flex-shrink:0;}
+
+.di.label.danger {background-color:#e50000; border-color:transparent; color:#fff;}
+.di.label.success {background-color:#00cc0a; border-color:transparent; color:#fff;}
+.di.label.warning {background-color:#ffb400; border-color:transparent; color: #fff;}
+.di.label.neutral {background-color:#ddd; border-color:transparent;}
+
+.di.label.small {height:16px; font-size:11px;}
+.di.label.small .remove {width:12px; height:12px;}
+.di.label.small .remove img {width:10px}
+.di.label.large {height:30px;}
+.di.label.large .remove {width:24px; height:24px;}
+
+.di.label.clickable {cursor:pointer;}
+
+a .di.label {text-decoration:solid inherit underline; font-weight:normal;}
+a .di.label:hover {background-color:rgba(0,0,0,.07); text-decoration:underline;}
+a .di.label:active {background-color:rgba(0,0,0,.1);}
+
+/* misc */
+.clearfix::after {content:""; clear:both; display:block; visibility:hidden; height:0px;}
+.disabled {opacity:0.35; pointer-events:none; cursor:default;}
+
+/* Tabs */
+.di.tabs {margin:5px 0 20px 0; border-bottom:1px solid #ddd; display:flex; flex-wrap:wrap; align-items:center;}
+.di.tabs .item {padding:12px 15px; margin-bottom:-1px; font-size:14px; text-decoration:none; border-bottom:2px solid transparent; color:#666; background:none; border-top:0; border-left:0; border-right:0; border-radius:0; cursor:pointer;}
+.di.tabs .item:hover {background-color:rgba(0, 0, 0, 0.07);}
+.di.tabs .item:active {background-color:rgba(0, 0, 0, 0.1);}
+.di.tabs .item.active, .dragging.item.active {font-weight:bold; color:#333; border-bottom:2px solid var(--primary-color, #1a8ed3); }
+.di.tabs .item.disabled {opacity:0.35; pointer-events:none; cursor:default;}
+.di.tabs .item .add {background:url('./svg/icon_add.svg') no-repeat center; padding:0 25px; background-size: 16px 16px;}
+.dragging.item {padding:12px 15px; margin-bottom:-1px; font-size:14px; text-decoration:none; border-bottom:2px solid transparent; color:#666; background-color:rgba(0, 0, 0, 0.1); border-top:0; border-left:0; border-right:0; border-radius:0; cursor: move; white-space: nowrap;}
+.draggable-area * { cursor: move;}
+.di.tabs .tab-header, .dragging .tab-header { position: relative;}
+.di.tabs .tab-header:after, .dragging .tab-header:after { position: absolute; content: ''; top: 0; bottom: 0; right: 0; left: 0; }
+
+/* Accordion */
+.di.accordion {width:auto;}
+.di.accordion .item {border-bottom:1px solid #bbb;}
+.di.accordion .head {display:flex; align-items:center; justify-content: space-between; transition:.1s all ease;}
+.di.accordion .head:hover {background-color:rgba(0,0,0,.07); transition-duration: 0s;}
+.di.accordion .head::before {content:''; position:absolute;display:inline-block; width:0; height:0; margin:0 0 0 3px; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:4px solid black;pointer-events:none;}
+.di.accordion .head::before {transition:.1s all ease;}
+.di.accordion .title {width:100%; padding:15px 15px 15px 20px; display:flex; align-items:center; cursor:pointer;}
+.di.accordion .title * {margin:initial} /* h1, h2 etc. no IE11 */
+.di.accordion .title span {margin-right:10px;}
+.di.accordion .tools {padding:0 0 0 15px; display:flex; align-items:center;}
+.di.accordion .cont {height:0px; overflow:hidden; padding:0 0 0 25px; opacity:.3; transition:.25s all ease; transform:scaleY(.90); transform-origin: top left;}
+.di.accordion .item.open .cont {height:auto; padding:15px 0 15px 25px; opacity:1; transform:scaleY(1)}
+.di.accordion .item.open .head:before {transform:rotate(90deg); transition:.3s ease;}
+.di.accordion .item.open .head {border-bottom:1px dashed #eee;}
+.di.accordion .accordion {background-color:rgba(0,0,0,.05);} /* nested */
+.di.accordion h2 {margin-top:0px !important;}
+
+/* Popup */
+.di.popup {min-width:40px; margin-top:-3px; z-index:1000; top:0; left:0; background-color:#fff; border:1px solid rgba(0,0,0,.2); box-shadow:0 1px 3px rgba(0,0,0,0.2); border-radius:3px; opacity:0}
+.di.popup {transition:opacity .1s ease, margin .1s ease;}
+.di.popup-wrapper.hidden, .di.popup-wrapper.hidden > * {opacity: 0 !important; pointer-events: none;}
+.di.popup-wrapper {transition: opacity 200ms ease;}
+
+.di.popup[class*='bottom'],
+.di.popup[class*='top'],
+.di.popup[class*='right'],
+.di.popup[class*='left'] {opacity:1;}
+.di.popup[class*='bottom'] {margin-top:12px;}
+.di.popup[class*='top'] {margin-top:-12px;}
+.di.popup[class*='right'] {margin-left:12px;}
+.di.popup[class*='left'] {margin-right:15px;}
+
+.di.popup .popup-arrow {width:10px; height:10px; margin:0; background-color:#fff; position:absolute; z-index:0; border:1px solid rgba(0,0,0,0.2); border-right:none; border-bottom:none;}
+.di.popup .popup-arrow[class*='bottom'] {top: -6px;}
+.di.popup .popup-arrow[class*='top'] {bottom: -6px;}
+.di.popup .popup-arrow[class*='left'] {right: -6px;}
+.di.popup .popup-arrow[class*='right'] {left: -6px;}
+
+.di.popup .popup-arrow[class*='bottom']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(45deg);
+}
+
+.di.popup .popup-arrow[class*='top']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(-135deg);
+}
+
+.di.popup .popup-arrow[class*='left']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(135deg);
+}
+
+.di.popup .popup-arrow[class*='right']::before {
+    border-bottom: none;
+    border-right: none;
+    transform: rotate(-45deg);
+}
+.di.popup .popup-arrow, .di.popup .popup-arrow::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    border: 1px solid rgba(0, 0, 0, 0.2)
+}
+
+.di.popup .popup-arrow {
+    visibility: hidden;
+}
+
+.di.popup .popup-arrow::before {
+     visibility: visible;
+     content: '';
+ }
+
+.di.popup .popup-content {margin:10px;}
+
+.di.popup.inverted {background-color:#333; box-shadow:none;}
+.di.popup.inverted .popup-arrow {background-color:#333; border:none;}
+.di.popup.inverted .popup-content {color:#fff;}
+.di.popup.inverted a {color:#fff; text-decoration:none; vertical-align:middle;}
+.di.popup.inverted a:hover {text-decoration:underline;}
+
+/* Bubble */
+.di.popup.bubble .bubble-content {padding:5px; white-space:nowrap; display:inline-block;}
+
+/* Tooltip */
+.di.popup.tooltip {transition:none; transition:opacity .1s ease;}
+.di.popup.tooltip .tooltip-content{white-space:nowrap; display:inline-block; line-height:12px;}

package/lib/cjs/assets/svg/icon_add.svg

@@ -0,0 +1,3 @@
+<svg id="icon-add_24_sga" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <polygon id="plus" points="20 10 14 10 14 4 10 4 10 10 4 10 4 14 10 14 10 20 14 20 14 14 20 14 20 10"/>
+</svg>

package/lib/cjs/assets/svg/icon_calendar.svg

@@ -0,0 +1,50 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g>
+    <g>
+      <rect class="cls-1" x="3.5" y="7.5" width="2" height="2"/>
+      <path d="M5,8V9H4V8H5M6,7H3v3H6V7Z"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="8" y="7" width="1" height="1"/>
+      <polygon points="9 7 8 7 8 8 9 8 9 7 9 7"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="10" y="7" width="1" height="1"/>
+      <polygon points="11 7 10 7 10 8 11 8 11 7 11 7"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="12" y="7" width="1" height="1"/>
+      <polygon points="13 7 12 7 12 8 13 8 13 7 13 7"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="8" y="9" width="1" height="1"/>
+      <polygon points="9 9 8 9 8 10 9 10 9 9 9 9"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="8" y="11" width="1" height="1"/>
+      <polygon points="9 11 8 11 8 12 9 12 9 11 9 11"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="6" y="11" width="1" height="1"/>
+      <polygon points="7 11 6 11 6 12 7 12 7 11 7 11"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="4" y="11" width="1" height="1"/>
+      <polygon points="5 11 4 11 4 12 5 12 5 11 5 11"/>
+    </g>
+    <g>
+      <rect class="cls-1" x="10.5" y="9.5" width="2" height="2"/>
+      <path d="M12,10v1H11V10h1m1-1H10v3h3V9Z"/>
+    </g>
+    <path d="M15.31,2H.69A.69.69,0,0,0,0,2.69V14.31A.69.69,0,0,0,.69,15H15.31a.69.69,0,0,0,.69-.69V2.69A.69.69,0,0,0,15.31,2ZM14,13H2V6H14Z"/>
+  </g>
+  <rect x="3" width="3" height="2"/>
+  <rect x="10" width="3" height="2"/>
+</svg>

package/lib/cjs/assets/svg/icon_chevron_left.svg

@@ -0,0 +1,6 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <g>
+    <polygon points="3.59 8 9.94 1.65 11.35 3.06 6.41 8 11.35 12.94 9.94 14.35 3.59 8"/>
+    <path d="M9.94,2.35l.71.71L6.41,7.29,5.71,8l.7.71,4.24,4.23-.71.71L4.29,8,9.94,2.35m0-1.41L2.88,8l7.06,7.06,2.12-2.12L7.12,8l4.94-4.94L9.94.94Z"/>
+  </g>
+</svg>

package/lib/cjs/assets/svg/icon_chevron_right.svg

@@ -0,0 +1,6 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <g>
+    <polygon points="3.59 12.94 8.53 8 3.59 3.06 5 1.65 11.35 8 5 14.35 3.59 12.94"/>
+    <path d="M5,2.35,10.65,8,5,13.65l-.71-.71L8.53,8.71,9.23,8l-.7-.71L4.29,3.06,5,2.35M5,.94,2.88,3.06,7.82,8,2.88,12.94,5,15.06,12.06,8,5,.94Z"/>
+  </g>
+</svg>

package/lib/cjs/assets/svg/icon_cross.svg

@@ -0,0 +1,3 @@
+<svg id="icon-cross_24_sga" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <polygon id="icon-cross_24" points="20 6.28 17.87 4 12 9.78 6.13 4 4 6.28 9.78 11.97 4 17.66 6.13 19.93 12 14.15 17.87 19.93 20 17.66 14.22 11.97 20 6.28"/>
+</svg>

package/lib/cjs/assets/svg/icon_download.svg

@@ -0,0 +1,5 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon points="7.92 12 2.84 7 13 7 7.92 12"/>
+  <rect x="5" y="2" width="6" height="5"/>
+  <rect x="2" y="14" width="12" height="1"/>
+</svg>

package/lib/cjs/assets/svg/icon_duplicate.svg

@@ -0,0 +1,10 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g>
+    <path d="M22.1,4.91a3,3,0,0,0-3-3H6.44a2.4,2.4,0,0,1,1.34-.4h12.6A2.12,2.12,0,0,1,22.5,3.62V17.26a1.42,1.42,0,0,1-.4,1Z"/>
+    <path d="M20.38,1H7.78A3,3,0,0,0,5.26,2.4H19.09A2.51,2.51,0,0,1,21.6,4.91V19.12A1.94,1.94,0,0,0,23,17.26V3.62A2.62,2.62,0,0,0,20.38,1Z"/>
+  </g>
+  <g>
+    <path d="M4,21.5A1.5,1.5,0,0,1,2.5,20V5.8A1.5,1.5,0,0,1,4,4.3H18.2a1.5,1.5,0,0,1,1.5,1.5V20a1.5,1.5,0,0,1-1.5,1.5ZM9.5,18a.5.5,0,0,0,.5.5h2a.5.5,0,0,0,.5-.5V14.5H16a.5.5,0,0,0,.5-.5V12a.5.5,0,0,0-.5-.5H12.5V8a.5.5,0,0,0-.5-.5H10a.5.5,0,0,0-.5.5v3.5H6a.5.5,0,0,0-.5.5v2a.5.5,0,0,0,.5.5H9.5Z"/>
+    <path d="M18.2,4.8a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5.8a1,1,0,0,1,1-1H18.2M9,11H6a1,1,0,0,0-1,1v2a1,1,0,0,0,1,1H9v3a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1V15h3a1,1,0,0,0,1-1V12a1,1,0,0,0-1-1H13V8a1,1,0,0,0-1-1H10A1,1,0,0,0,9,8v3m9.2-7.2H4a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18.2a2,2,0,0,0,2-2V5.8a2,2,0,0,0-2-2ZM6,14V12h4V8h2v4h4v2H12v4H10V14Z"/>
+  </g>
+</svg>

package/lib/cjs/assets/svg/icon_edit.svg

@@ -0,0 +1,6 @@
+<svg id="icon-edit-24_sga" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g id="stift">
+    <path d="M7.35,12.65a.5.5,0,0,0,0,.7l3.3,3.3a.5.5,0,0,0,.7,0l8.3-8.3A1.4,1.4,0,0,0,20,7.5v-1a1.4,1.4,0,0,0-.35-.85l-1.3-1.3A1.4,1.4,0,0,0,17.5,4h-1a1.4,1.4,0,0,0-.85.35Z"/>
+  </g>
+  <path d="M5.9,14.49c.06-.27.26-.33.45-.14l3.3,3.3c.19.19.13.39-.14.45l-4,.8a.3.3,0,0,1-.39-.39Z"/>
+</svg>

package/lib/cjs/assets/svg/icon_folder_loading.svg

@@ -0,0 +1,21 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+    <rect x="0" y="0" width="5" height="10" fill="#000">
+      <animateTransform attributeType="xml"
+        attributeName="transform" type="translate"
+        values="0 0; 0 14; 0 0"
+        begin="0" dur="0.6s" repeatCount="indefinite" />
+    </rect>
+    <rect x="9" y="0" width="5" height="10" fill="#000">
+      <animateTransform attributeType="xml"
+        attributeName="transform" type="translate"
+        values="0 0; 0 14; 0 0"
+        begin="0.2s" dur="0.6s" repeatCount="indefinite" />
+    </rect>
+    <rect x="19" y="0" width="5" height="10" fill="#000">
+      <animateTransform attributeType="xml"
+        attributeName="transform" type="translate"
+        values="0 0; 0 14; 0 0"
+        begin="0.4s" dur="0.6s" repeatCount="indefinite" />
+    </rect>
+</svg>

package/lib/cjs/assets/svg/icon_fullscreen.svg

@@ -0,0 +1,6 @@
+<svg data-name="icon_fullscreen_sga" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <polygon id="ecke" points="2 14 2 10 0 10 0 16 6 16 6 14 2 14"/>
+  <polygon id="ecke-2" data-name="ecke" points="2 2 6 2 6 0 0 0 0 6 2 6 2 2"/>
+  <polygon id="ecke-3" data-name="ecke" points="14 14 10 14 10 16 16 16 16 10 14 10 14 14"/>
+  <polygon id="ecke-4" data-name="ecke" points="10 0 10 2 14 2 14 6 16 6 16 0 10 0"/>
+</svg>

package/lib/cjs/assets/svg/icon_gear.svg

@@ -0,0 +1,5 @@
+<svg id="icon-gear-24_sga" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g id="icon-gear-24_sga-2" data-name="icon-gear-24_sga">
+    <path d="M22.82,14.06A1.25,1.25,0,0,0,24,13,7.66,7.66,0,0,0,24,12,7.66,7.66,0,0,0,24,11a1.25,1.25,0,0,0-1.13-1l-1.09,0A1.49,1.49,0,0,1,20.44,9c-.15-.47-.44-2-.07-2.37l.74-.81a1.16,1.16,0,0,0,0-1.5L19.7,2.87a1.16,1.16,0,0,0-1.5,0l-.81.74a1.5,1.5,0,0,1-1.54.27c-.44-.23-1.72-1.08-1.74-1.63l0-1.09A1.25,1.25,0,0,0,13,.05a7.66,7.66,0,0,0-1,0,7.66,7.66,0,0,0-1,.05,1.25,1.25,0,0,0-1,1.13l0,1.09A1.52,1.52,0,0,1,9,3.56c-.47.15-2,.44-2.37.07L5.8,2.89a1.16,1.16,0,0,0-1.5,0L2.86,4.3a1.18,1.18,0,0,0,0,1.5l.74.81A1.5,1.5,0,0,1,3.9,8.15c-.23.44-1.08,1.72-1.63,1.74l-1.09,0A1.25,1.25,0,0,0,.05,11a7.66,7.66,0,0,0,0,1,7.66,7.66,0,0,0,.05,1,1.25,1.25,0,0,0,1.13,1l1.09,0A1.47,1.47,0,0,1,3.55,15c.16.48.45,2,.08,2.37l-.74.81a1.16,1.16,0,0,0,0,1.5L4.3,21.13a1.16,1.16,0,0,0,1.5,0l.81-.74a1.5,1.5,0,0,1,1.54-.27c.44.23,1.72,1.08,1.75,1.63l0,1.09A1.25,1.25,0,0,0,11,24,7.66,7.66,0,0,0,12,24,7.66,7.66,0,0,0,13,24a1.25,1.25,0,0,0,1-1.13l0-1.09A1.49,1.49,0,0,1,15,20.44c.47-.15,2-.44,2.37-.07l.81.74a1.16,1.16,0,0,0,1.5,0l1.43-1.43a1.16,1.16,0,0,0,0-1.5l-.74-.81a1.5,1.5,0,0,1-.27-1.54c.23-.44,1.08-1.72,1.63-1.74ZM12,15.5A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
+  </g>
+</svg>

package/lib/cjs/assets/svg/icon_help_light.svg

@@ -0,0 +1,3 @@
+<svg id="Icon_help" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path id="icon_help-2" data-name="icon_help" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm1,16H11V15h2Zm1.7-6.26a4.85,4.85,0,0,1-.49.81l-1,1.37a1.36,1.36,0,0,0-.18.34,1,1,0,0,0-.07.38L13,14H11l.1-.49a2,2,0,0,1,.13-.77,3.18,3.18,0,0,1,.4-.69l1-1.33a3.21,3.21,0,0,0,.29-.46,1.19,1.19,0,0,0,.11-.47,1.17,1.17,0,0,0-.3-.82,1.07,1.07,0,0,0-.83-.33A1,1,0,0,0,11.1,9a1.25,1.25,0,0,0-.28.83H9a2.94,2.94,0,0,1,.23-1.17,2.45,2.45,0,0,1,.63-.88,2.9,2.9,0,0,1,.93-.55A3.13,3.13,0,0,1,11.94,7a3.31,3.31,0,0,1,1.13.19,2.82,2.82,0,0,1,.94.54,2.62,2.62,0,0,1,.65.88A3,3,0,0,1,14.9,9.8,2.16,2.16,0,0,1,14.7,10.74Z" style="opacity: 0.2"/>
+</svg>

package/lib/cjs/assets/svg/icon_key.svg

@@ -0,0 +1,3 @@
+<svg data-name="icon_key" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 27">
+  <path d="M35.07,16.5a8.52,8.52,0,0,0-7.69,12L17.2,38.8a2.46,2.46,0,0,0,0,3.46,2.41,2.41,0,0,0,3.42,0l1.69-1.7,2.91,2.94L31,37.63l-2.92-3,2.44-2.46a8.31,8.31,0,0,0,4.51,1.33,8.53,8.53,0,0,0,0-17Zm0,3.91A4.62,4.62,0,1,1,30.5,25,4.6,4.6,0,0,1,35.07,20.41Z" transform="translate(-16.49 -16.5)"/>
+</svg>

package/lib/cjs/assets/svg/icon_lupe.svg

@@ -0,0 +1,14 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g>
+    <circle class="cls-1" cx="5.5" cy="5.5" r="4.5"/>
+    <path d="M5.5,2A3.5,3.5,0,1,1,2,5.5,3.5,3.5,0,0,1,5.5,2m0-1A4.5,4.5,0,1,0,10,5.5,4.49,4.49,0,0,0,5.5,1Z"/>
+  </g>
+  <rect x="6.79" y="10.04" width="7.74" height="2.16" transform="translate(10.98 -4.28) rotate(45)"/>
+</svg>

package/lib/cjs/assets/svg/icon_menu_horizontal.svg

@@ -0,0 +1,5 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <circle cx="12.5" cy="7.5" r="1.5"/>
+  <circle cx="8.5" cy="7.5" r="1.5"/>
+  <circle cx="4.5" cy="7.5" r="1.5"/>
+</svg>

package/lib/cjs/assets/svg/icon_menu_vertical.svg

@@ -0,0 +1,5 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <circle cx="7.5" cy="3.5" r="1.5"/>
+  <circle cx="7.5" cy="7.5" r="1.5"/>
+  <circle cx="7.5" cy="11.5" r="1.5"/>
+</svg>

package/lib/cjs/assets/svg/icon_reload.svg

@@ -0,0 +1,6 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g id="Pfeilende">
+    <path d="M24,10H15l9-8.93Z"/>
+  </g>
+  <path d="M18.45,18.78A9.33,9.33,0,0,1,2.62,14.86,9.8,9.8,0,0,1,8.89,2.69,9.42,9.42,0,0,1,20.72,9.14H23A11.72,11.72,0,0,0,11.68,0,11.74,11.74,0,0,0,.34,9.14,12,12,0,0,0,8.89,23.65a11.43,11.43,0,0,0,11.16-3.31Z"/>
+</svg>

package/lib/cjs/assets/svg/icon_star.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="icon_star_16" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path id="star" d="M8,0l2.45,4.97,5.55,.76-4.04,3.83,.99,5.44-4.94-2.61-4.94,2.61,.99-5.44L0,5.73l5.55-.76L8,0Z"/>
+</svg>

package/lib/cjs/assets/svg/icon_upload.svg

@@ -0,0 +1,7 @@
+<svg id="upload_cloud_32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <path id="wolke" d="M25.08,12.31A9.54,9.54,0,0,0,7.26,9.76,7.64,7.64,0,0,0,8.08,25H24.63a6.35,6.35,0,0,0,.45-12.69Z"/>
+  <g id="Pfeil">
+    <polyline points="10 20 16 14 22 20" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 2px"/>
+    <rect x="14" y="15" width="4" height="11" style="fill: #fff"/>
+  </g>
+</svg>

package/lib/cjs/assets/svg/icon_warning_triangle.svg

@@ -0,0 +1,12 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path d="M11.22,2.93,1,20.82a1,1,0,0,0,.86,1.5H22.32a1,1,0,0,0,.87-1.5L13,2.93A1,1,0,0,0,11.22,2.93Z"/>
+  <rect class="cls-1" x="10.6" y="16.34" width="2.99" height="2.99"/>
+  <rect class="cls-1" x="10.6" y="8.88" width="2.99" height="5.98"/>
+</svg>

package/lib/cjs/assets/svg/triangle_down.svg

@@ -0,0 +1,3 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon points="7.5 10 4 6 11 6 7.5 10"/>
+</svg>

package/lib/cjs/assets/svg/triangle_left.svg

@@ -0,0 +1,3 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <polygon points="6 8.02 10 12 10 4.04 6 8.02"/>
+</svg>