@gandalan/weblibs 0.0.26 → 0.0.29

package/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

package/.eslintrc.cjs

@@ -0,0 +1,43 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended'],
+	plugins: ['svelte3'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parser: '@babel/eslint-parser',
+	parserOptions: {
+		requireConfigFile: false,
+		sourceType: 'module',
+		ecmaVersion: 2020,
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true,
+	},
+	rules: {
+		//indent: ['error', 4],
+		quotes: ['warn', 'single'],
+		semi: ['off', 'never'],
+		'no-multi-spaces': ['error', { ignoreEOLComments: true }],
+		'curly': 'error',
+		'comma-spacing': 'error',
+		'brace-style': 'error',
+		'no-var': 'error',
+		'key-spacing': 'warn',
+		'keyword-spacing': 'warn',
+		'space-infix-ops': 'warn',
+		'arrow-spacing': 'warn',
+		'no-trailing-spaces': 'warn',
+		'space-before-blocks': 'warn',
+		'no-console': 'warn',
+		'no-extra-boolean-cast': 'off',
+		'no-multiple-empty-lines': ['warn', { 'max': 1, 'maxBOF': 0 }],
+		'lines-between-class-members': ['warn', 'always', { exceptAfterSingleLine: true }],
+		'no-unneeded-ternary': 'error',
+		'no-else-return': ['error', { 'allowElseIf': false }],
+		'array-bracket-newline': ['error', 'consistent'],
+		'eol-last': ['error', 'always'],
+		'prefer-template': 'error',
+		'comma-dangle': ['warn', 'always-multiline'],
+	},
+};

package/api/IDAS.js

@@ -1,77 +1,102 @@
-import { RESTClient } from "./RESTClient";
+import { RESTClient } from './RESTClient';
 
-let appToken = localStorage.getItem("IDAS_AppToken") || "66B70E0B-F7C4-4829-B12A-18AD309E3970";
-let authToken = localStorage.getItem("IDAS_AuthToken");
-let apiBaseUrl = localStorage.getItem("IDAS_ApiBaseUrl") || "https://api.dev.idas-cloudservices.net/api/";
+let appToken = localStorage.getItem('IDAS_AppToken') || '66B70E0B-F7C4-4829-B12A-18AD309E3970';
+let authToken = localStorage.getItem('IDAS_AuthToken');
+let apiBaseUrl = localStorage.getItem('IDAS_ApiBaseUrl') || 'https://api.dev.idas-cloudservices.net/api/';
 
 const url = new URL(apiBaseUrl);
-url.pathname = "/SSO";
-url.search = "?a=" + appToken + "&r=%target%%3Ft=%token%%26m=%mandant%";
+url.pathname = '/SSO';
+url.search = `?a=${appToken}&r=%target%%3Ft=%token%%26m=%mandant%`;
 let ssoAuthUrl = url.toString();
 
 let restClient = new RESTClient(apiBaseUrl, authToken);
 restClient.onError = (error, message) => {
-    if (message.indexOf("401") || message.indexOf("403"))
-    {    
+    if (message.indexOf('401') || message.indexOf('403')) {
         //console.log(message+" would remove Token");
-        localStorage.removeItem("IDAS_AuthToken");
-        var ssoURL = ssoAuthUrl.replace("%target%", encodeURIComponent(window.location.href));
+        localStorage.removeItem('IDAS_AuthToken');
+        let ssoURL = ssoAuthUrl.replace('%target%', encodeURIComponent(window.location.href));
         window.location = ssoURL;
     }
 }
 
-export class IDAS 
-{
-    async authenticate(authDTO) { 
+export class IDAS {
+    async authenticate(authDTO) {
         authDTO.AppToken = appToken;
-        var { data } = await restClient.post("/Login/Authenticate", authDTO); 
-        console.log(data);
-        if (data?.Token)
-        {
+        let { data } = await restClient.post('/Login/Authenticate', authDTO);
+        if (data?.Token) {
             authToken = data.Token;
-            localStorage.setItem("IDAS_AuthToken", authToken);
+            localStorage.setItem('IDAS_AuthToken', authToken);
             restClient = new RESTClient(apiBaseUrl, authToken);
         }
         return data;
     }
 
-    async authenticateWithSSO() { 
-        if (!authToken)
-        {
-            var ssoURL = ssoAuthUrl.replace("%target%", encodeURIComponent(window.location.href));
+    async authenticateWithSSO() {
+        if (!authToken) {
+            let ssoURL = ssoAuthUrl.replace('%target%', encodeURIComponent(window.location.href));
             window.location = ssoURL;
         }
     }
 
-    mandantGuid = localStorage.getItem("IDAS_MandantGuid");
+    mandantGuid = localStorage.getItem('IDAS_MandantGuid');
 
     auth = {
-        async getCurrentAuthToken() { return await restClient.put("/Login/Update/", { Token: authToken }); },
+        async getCurrentAuthToken() {
+            return await restClient.put('/Login/Update/', { Token: authToken })
+        },
     };
 
     mandanten = {
-        async getAll() { return await restClient.get("/Mandanten"); },
-        async get(guid) { return await restClient.get("/Mandanten/" + guid); },
-        async save(m) { await restClient.put("/Mandanten", m); }
+        async getAll() {
+            return await restClient.get('/Mandanten');
+        },
+        async get(guid) {
+            return await restClient.get(`/Mandanten/${guid}`);
+        },
+        async save(m) {
+            await restClient.put('/Mandanten', m);
+        },
     };
 
     benutzer = {
-        async getAll(mandantGuid) { return await restClient.get("/BenutzerListe/" + mandantGuid + "/?mitRollenUndRechten=true"); },
-        async get(guid) { return await restClient.get("/Benutzer/" + guid); },
-        async save(m) { await restClient.put("/Benutzer", m); }
+        async getAll(mandantGuid) {
+            return await restClient.get(`/BenutzerListe/${mandantGuid }/?mitRollenUndRechten=true`);
+        },
+        async get(guid) {
+            return await restClient.get(`/Benutzer/${guid}`);
+        },
+        async save(m) {
+            await restClient.put('/Benutzer', m);
+        },
     };
 
     feedback = {
-        async getAll() { return await restClient.get("/Feedback/"); },
-        async get(guid) { return await restClient.get("/Feedback/" + guid); },
-        async save(m) { await restClient.put("/Feedback", m); },
-        async comment(guid, commentData) { await restClient.put("/FeedbackKommentar/" + guid, commentData); },
-        async attachFile(m) { await restClient.put("/FeedbackAttachment", m); },
-        async deleteFile(guid) { await restClient.delete("/FeedbackAttachment/" + guid); }
+        async getAll() {
+            return await restClient.get('/Feedback/');
+        },
+        async get(guid) {
+            return await restClient.get(`/Feedback/${guid}`);
+        },
+        async save(m) {
+            await restClient.put('/Feedback', m);
+        },
+        async comment(guid, commentData) {
+            await restClient.put(`/FeedbackKommentar/${guid}`, commentData);
+        },
+        async attachFile(m) {
+            await restClient.put('/FeedbackAttachment', m);
+        },
+        async deleteFile(guid) {
+            await restClient.delete(`/FeedbackAttachment/${guid}`);
+        },
     };
 
     rollen = {
-        async getAll() { return await restClient.get("/Rollen"); },
-        async save(m) { await restClient.put("/Rollen", m); }
+        async getAll() {
+            return await restClient.get('/Rollen');
+        },
+        async save(m) {
+            await restClient.put('/Rollen', m);
+        },
     };
-}
+}

package/api/RESTClient.js

@@ -1,122 +1,106 @@
-import axios from "axios";
+import axios from 'axios';
 
 /*export let AppToken = "66B70E0B-F7C4-4829-B12A-18AD309E3970";
 export let AuthToken = localStorage.getItem("AuthToken");
 export let MandantGuid = localStorage.getItem("MandantGuid");
 export let ApiBaseUrl = localStorage.getItem("ApiBaseUrl") || "https://api.dev.idas-cloudservices.net/api";
 export let SiteBaseUrl = window.location.origin;
-export let SSOAuthUrl = ApiBaseUrl.replace("/api", "") + "/SSO?a=" + AppToken + "&r=%target%?t=%token%%26m=%mandant%";*/
+export let SSOAuthUrl = ApiBaseUrl.replace("/api", '') + "/SSO?a=" + AppToken + "&r=%target%?t=%token%%26m=%mandant%";*/
 
-export class RESTClient 
-{
+export class RESTClient {
     lastError = '';
-    token = "";
-    baseurl = "";
+    token = '';
+    baseurl = '';
 
-    constructor(url, token)
-    {
-        this.lastError = "";
+    constructor(url, token) {
+        this.lastError = '';
         this.baseurl = url;
         this.token = token;
-        console.log("Base: " + this.baseurl + " Token: " + this.token);
 
         if (this.token) {
             axios.defaults.headers.common['X-Gdl-AuthToken'] = this.token;
         }
 
         axios.interceptors.request.use(req => {
-            console.log(`${req.method} ${req.url}`);
             return req;
         });
     }
 
-    async get(uri)
-    {
+    async get(uri) {
         try {
             const response = await axios.get(this.baseurl + uri, { withCredentials: false });
             this.lastError = '';
             return response.data;
-        }
-        catch (error) {
+        } catch (error) {
             this.handleError(error);
         }
     }
 
-    async getFile(uri)
-    {
+    async getFile(uri) {
         try {
             const response = await axios.get(this.baseurl + uri, { responseType: 'blob' });
-            let fileName = "1000.pdf";
-            if (response.headers["content-disposition"]) {
-                fileName = response.headers["content-disposition"].split(';')[1];
-                fileName = fileName.replace("filename=", "").trim();
+            let fileName = '1000.pdf';
+            if (response.headers['content-disposition']) {
+                fileName = response.headers['content-disposition'].split(';')[1];
+                fileName = fileName.replace('filename=', '').trim();
             }
             this.lastError = '';
-            return { data: response.data, filename: fileName, contentType: "application/pdf" };
-        }
-        catch (error) {
+            return { data: response.data, filename: fileName, contentType: 'application/pdf' };
+        } catch (error) {
             this.handleError(error);
         }
     }
 
-    async getRaw(uri)
-    {
+    async getRaw(uri) {
         let response = {};
         try {
             response = await axios.get(this.baseurl + uri, { withCredentials: false })
             this.lastError = '';
-        }
-        catch (error) {
+        } catch (error) {
             this.handleError(error);
         }
         return response;
     }
 
-    async post(uri, formData) 
-    {
+    async post(uri, formData) {
         try {
             const response = await axios.post(this.baseurl + uri, formData, { withCredentials: false });
             this.lastError = '';
             return response;
-        }
-        catch (error) {
+        } catch (error) {
             this.handleError(error);
         }
     }
 
-    async put(uri, formData) 
-    {
+    async put(uri, formData) {
         try {
             const response = await axios.put(this.baseurl + uri, formData, { withCredentials: false });
             this.lastError = '';
             return response;
-        }
-        catch (error) {
+        } catch (error) {
             this.handleError(error);
         }
     }
 
-    async delete(uri)
-    {
-        try
-        {
+    async delete(uri) {
+        try {
             const response = await axios.delete(this.baseurl + uri, { withCredentials: false });
             this.lastError = '';
             return response;
-        }
-        catch (error) {
+        } catch (error) {
             this.handleError(error);
         }
     }
 
+    // eslint-disable-next-line no-unused-vars
     onError = (error, message) => {};
 
-    handleError(error)
-    {
-        let message = error ? error.message : "?";
-        console.log("API Error: " + message);
+    handleError(error) {
+        let message = error ? error.message : '?';
+        // eslint-disable-next-line no-console
+        console.log(`API Error: ${message}`);
         this.lastError = message;
         this.onError(error, message);
         throw error;
     }
-}
+}

package/components/AddButton.svelte

@@ -1,7 +1,7 @@
 <script>
     import { Button } from 'svelte-chota';
     import { mdiMessageAlert } from '@mdi/js'
-    
+
     export let Handler;
     export let disabled;
     export let title;
@@ -9,4 +9,4 @@
 
 <Button primary outline title={title} on:click={Handler} icon={mdiMessageAlert} {disabled}>
     {title}
-</Button>
+</Button>

package/components/DataGrid.svelte

@@ -6,35 +6,33 @@
     export let items = [];
     export let selectedItem = {};
     export let standardItem;
-    export let displayProperty = "";
-    export let header = "Überschrift";
-    export let key = "Guid";
+    export let displayProperty = '';
+    export let header = 'Überschrift';
+    export let key = 'Guid';
     export let marker = null;
-    export let markerField = "";
+    export let markerField = '';
 
-    function setCurrent(item)
-    {
+    function setCurrent(item) {
         selectedItem = item;
-        console.log(item);
-        dispatch("selectedItemChanged", item);
+        dispatch('selectedItemChanged', item);
     }
 </script>
 
-<div class="datagrid">    
+<div class="datagrid">
     <div class="dgheader">
         {header}
     </div>
     <div>
         {#if standardItem}
-        <div class="dgrow" on:click={setCurrent(standardItem)} class:selected="{selectedItem[key] === standardItem[key]}">{standardItem[displayProperty]}</div>
+            <div class="dgrow" on:click={setCurrent(standardItem)} class:selected="{selectedItem[key] === standardItem[key]}">{standardItem[displayProperty]}</div>
         {/if}
         {#each items as d}
-        <div class="dgrow" on:click={setCurrent(d)} class:selected="{selectedItem[key] === d[key]}">
-            {d[displayProperty]}
-            {#if marker && markerField && d[markerField] === true}
-            <Icon src={marker} />
-            {/if}
-        </div>
+            <div class="dgrow" on:click={setCurrent(d)} class:selected="{selectedItem[key] === d[key]}">
+                {d[displayProperty]}
+                {#if marker && markerField && d[markerField] === true}
+                    <Icon src={marker} />
+                {/if}
+            </div>
         {/each}
     </div>
 </div>
@@ -55,7 +53,7 @@
     padding: 4px 4px 4px 8px;
     flex: 1;
 }
- 
+
 .dgrow {
     margin-left: 8px;
     border-bottom: 1px solid var(--color-darkGrey);
@@ -65,8 +63,8 @@
 }
 
 .selected {
-    background-color: var(--color-selected); 
-    color: var(--color-selected-text);    
+    background-color: var(--color-selected);
+    color: var(--color-selected-text);
 }
 
-</style>
+</style>

package/components/Datepicker.svelte

@@ -1,18 +1,16 @@
 <script>
     export let Height = 30;
-    export let Placeholder = "";
-    export let Value = "";
+    export let Placeholder = '';
+    export let Value = '';
     export let Width = 120;
 
-    const backgroundNormal = "#FFFFFF";
-    const backgroundFalschesDatum = "#FF0000";
-    
-    let monate = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
-    let montateKurz = ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Nov", "Dez"];
-    let tage = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sontag"];
-    let tageKurz = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"];
+    const backgroundNormal = '#FFFFFF';
+    const backgroundFalschesDatum = '#FF0000';
 
-    let inputField, buttonStyle, divStyle, inputStyle;
+    let monate = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
+    let tageKurz = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+
+    let buttonStyle, divStyle, inputStyle;
     let background = backgroundNormal;
     let buttonHeight = Height - 6;
     let buttonImageHeight = Height - 10;
@@ -21,210 +19,162 @@
     let inputHeight = Height - 2;
     let inputWidth = Width - Height - 10;
 
-    let allowedNumbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
+    let allowedNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
     let allowedTage = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-    let allowedTageSchaltjahr = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-    let allowedSonderzeichen = ".";
-    let allowedFunctionalKeys = ["ArrowLeft", "ArrowRight", "Backspace", "Delete"];
+    let allowedSonderzeichen = '.';
+    let allowedFunctionalKeys = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'];
     let currentJahr = new Date().getFullYear();
     let currentMonat = monate[new Date().getMonth()];
     let wochenImMonat = [];
     let monatIndex = 0;
 
-    function alertFalschesDatum()
-    {
+    function alertFalschesDatum() {
         background = backgroundFalschesDatum;
         errorHidden = false;
         setFieldStyle();
     }
-    function backToNormal()
-    {
+    function backToNormal() {
         background = backgroundNormal;
         errorHidden = true;
         setFieldStyle();
     }
-    function checkGueltigesDatum()
-    {
+    function checkGueltigesDatum() {
         let error = false;
         let inhalt = Value.split(allowedSonderzeichen);
         let localTag = inhalt[0];
         let localMonat = inhalt[1];
-        let localJahr = inhalt[2];
 
-        if(inhalt.length == 1 && Value.length == 2)
-        {
+        if (inhalt.length == 1 && Value.length == 2) {
             Value = Value + allowedSonderzeichen;
         }
-        if(inhalt.length == 2 && localMonat.toLocaleString().length >= 2)
-        {
+        if (inhalt.length == 2 && localMonat.toLocaleString().length >= 2) {
             Value = Value + allowedSonderzeichen;
         }
 
         // Prüfung, ob der Monat korrekt eingegeben wurde
-        if(localMonat != "undefined" && (localMonat < 1 || localMonat > 12))
-        {
+        if (localMonat != 'undefined' && (localMonat < 1 || localMonat > 12)) {
             error = true;
-        }
-        else
-        {
+        } else {
             error = false;
         }
 
         // Prüfung, ob der Tag korrekt eingegeben wurde
-        if(localTag < 1 || localTag > 31)
-        {
+        if (localTag < 1 || localTag > 31) {
             error = true;
         }
 
-        if(localMonat != "undefined")
-        {
+        if (localMonat != 'undefined') {
             let localAllowedTage = allowedTage[inhalt[1]];
-            if(localAllowedTage == "undefined")
-            {
+            if (localAllowedTage == 'undefined') {
                 error = true;
             }
-            if(localTag > localAllowedTage)
-            {
+            if (localTag > localAllowedTage) {
                 error = true;
             }
         }
 
-        if(error)
-        {
+        if (error) {
             alertFalschesDatum();
-        }
-        else
-        {
+        } else {
             backToNormal();
         }
     }
-    function daysInMonth()
-    {
+    function daysInMonth() {
         wochenImMonat = [];
         monatIndex = monate.findIndex(item => item == currentMonat) + 1;
         let tageImMonat = new Date(currentJahr, monatIndex, 0).getDate();
         let localTagIndex = 0;
         let woche = [];
-        let tagesWochenCounter = 0;
 
-        for(let counter = 0; counter < tageImMonat; counter++)
-        {
-            localTagIndex = new Date(currentJahr, monatIndex-1, counter).getDay();
-            if(counter == 0)
-            {
-                // Am Anfang müssen erstmal x Leertage in die Woche eingefügt werden, damit der Monat 
+        for (let counter = 0; counter < tageImMonat; counter++) {
+            localTagIndex = new Date(currentJahr, monatIndex - 1, counter).getDay();
+            if (counter == 0) {
+                // Am Anfang müssen erstmal x Leertage in die Woche eingefügt werden, damit der Monat
                 // am passenden Wochentag startet => das macht es in der Anzeigeschleife leichter
-                for(let bufferCounter = 0; bufferCounter < localTagIndex; bufferCounter++)
-                {
+                for (let bufferCounter = 0; bufferCounter < localTagIndex; bufferCounter++) {
                     woche = [...woche, ''];
                 }
             }
-            woche = [...woche, counter+1];
+            woche = [...woche, counter + 1];
 
-            tagesWochenCounter++;
-            if(woche.length >= 7)
-            {
+            if (woche.length >= 7) {
                 wochenImMonat = [...wochenImMonat, woche]
                 woche = [];
-                tagesWochenCounter = 0;
             }
-            if(counter == tageImMonat-1)
-            {
+            if (counter == tageImMonat - 1) {
                 wochenImMonat = [...wochenImMonat, woche]
                 woche = [];
-                tagesWochenCounter = 0;
             }
         }
     }
-    function ignoreInput(e)
-    {
+    function ignoreInput(e) {
         e.preventDefault();
         e.returnValue = false;
     }
-    function setFieldStyle()
-    {
-        buttonStyle = "background: transparent; border: 0px; height: " + buttonHeight + "px; margin-left: 10px; margin-right: 8px; margin-top: 0px; width: " + buttonHeight + "px;";
-        divStyle = "background: white; border: 0.5px solid lightgray; border-radius: 5px; display: flex; height: " + Height + "px; width: " + Width + "px;";
-        inputStyle = "background: " + background + "; border: 0px; height: " + inputHeight + "px; width: " + inputWidth + "px;";
+    function setFieldStyle() {
+        buttonStyle = `background: transparent; border: 0px; height: ${buttonHeight}px; margin-left: 10px; margin-right: 8px; margin-top: 0px; width: ${buttonHeight}px;`;
+        divStyle = `background: white; border: 0.5px solid lightgray; border-radius: 5px; display: flex; height: ${Height}px; width: ${Width}px;`;
+        inputStyle = `background: ${background}; border: 0px; height: ${inputHeight}px; width: ${inputWidth}px;`;
     }
-    function setJahr(selectedJahr)
-    {
+    function setJahr(selectedJahr) {
         currentJahr = selectedJahr.currentJahr;
         daysInMonth();
     }
-    function setMonat(selectedMonat)
-    {
+    function setMonat(selectedMonat) {
         currentMonat = selectedMonat.currentMonat;
         daysInMonth();
     }
-    function setPlaceholder(tag)
-    {
-        if(tag != "")
-        {
+    function setPlaceholder(tag) {
+        if (tag != '') {
             //Placeholder = getFormattedDate(tag);
         }
     }
-    function setValue(tag)
-    {
-        Value = new Date(currentJahr+"-"+currentMonat+"-"+tag);
+    function setValue(tag) {
+        Value = new Date(`${currentJahr}-${currentMonat}-${tag}`);
         datePickerHidden = true;
         backToNormal();
     }
-    function thisKeyDown(e)
-	{
-        if(allowedNumbers.includes(e.key) == true)
-        {
-            let inhalt = Value.split(allowedSonderzeichen);
-            if(Value.length >= 10)
-            {
+    function thisKeyDown(e) {
+        if (allowedNumbers.includes(e.key) == true) {
+            if (Value.length >= 10) {
                 ignoreInput(e);
             }
             checkGueltigesDatum();
-        }
-        else if (e.key == allowedSonderzeichen)
-        {
+        } else if (e.key == allowedSonderzeichen) {
             // Kann nicht mit einer && Verknüpfung in die else if-Bedingung gepackt werden, da sonst gar kein Sonderzeichen mehr erlaubt ist... warum auch immer.
-            if(Value.split(allowedSonderzeichen).length >= 3)
-            {
+            if (Value.split(allowedSonderzeichen).length >= 3) {
                 ignoreInput(e);
             }
-        }
-        else if (allowedFunctionalKeys.includes(e.key) == true) { }
-        else 
-        {
+        } else if (allowedFunctionalKeys.includes(e.key) == true) {
+			return;
+		} else {
             ignoreInput(e);
         }
 	}
-    function getValueFormatted(oldValue)
-    {
+    function getValueFormatted(oldValue) {
         let localTag = (new Date(oldValue).getUTCDate()).toString();
-        let localMonat = (new Date(oldValue).getMonth()+1).toString();
+        let localMonat = (new Date(oldValue).getMonth() + 1).toString();
         let localJahr = new Date(oldValue).getUTCFullYear().toString();
 
-        if(localMonat.length < 2)
-        {
-            localMonat = "0" + localMonat;
+        if (localMonat.length < 2) {
+            localMonat = `0${localMonat}`;
         }
-        if(localTag.length < 2)
-        {
-            localTag = "0" + localTag;
+        if (localTag.length < 2) {
+            localTag = `0${localTag}`;
         }
-        return localTag + "." + localMonat + "." + localJahr;
+        return `${localTag }.${localMonat}.${localJahr}`;
     }
 
-    $:if(true)
-    {
-        setFieldStyle();
-        daysInMonth(currentMonat, currentJahr);
-    }
-    $:if(Value)
-    {
+    setFieldStyle();
+    daysInMonth(currentMonat, currentJahr);
+
+    $:if (Value) {
         Value = getValueFormatted(Value);
     }
 </script>
 
 <div style={divStyle}>
-    <input bind:this={inputField} type="text" style={inputStyle} placeholder={Placeholder} bind:value={Value} on:keydown={thisKeyDown}>
+    <input type="text" style={inputStyle} placeholder={Placeholder} bind:value={Value} on:keydown={thisKeyDown}>
     <button style={buttonStyle} on:click={() => datePickerHidden = !datePickerHidden}>
         <img src="calendar.png" alt="" height={buttonImageHeight}>
         <!-- [...] -->
@@ -255,7 +205,7 @@
             <tr>
                 {#each woche as tageInWoche}
                     <td>
-                        <button class="buttonTag" on:mouseover={() => setPlaceholder(tageInWoche)} on:click={() => setValue(tageInWoche)}>
+                        <button class="buttonTag" on:mouseover={() => setPlaceholder(tageInWoche)} on:focus={() => setPlaceholder(tageInWoche)} on:click={() => setValue(tageInWoche)}>
                             {tageInWoche}
                         </button>
                     </td>
@@ -298,4 +248,4 @@
         background-color:cornflowerblue;
         color: white;
     }
-</style>
+</style>

package/components/Dialog.svelte

@@ -3,7 +3,7 @@
 </script>
 
 {#if isOpen}
-    <div class="z-10 absolute w-screen h-screen bg-black left-0 top-0 bg-opacity-50">        
+    <div class="z-10 absolute w-screen h-screen bg-black left-0 top-0 bg-opacity-50">
     </div>
 
     <div class="z-10 absolute left-[20vw] top-[10vw] w-[60vw] shadow-xl shadow-slate-700 bg-white p-8">
@@ -17,4 +17,4 @@
             <button class="float-right bg-gray-600 text-white p-4" on:click={() => isOpen = false}>Schließen</button>
         </div>
     </div>
-{/if}
+{/if}

package/components/GanTable.svelte

@@ -1,11 +1,11 @@
 <script>
-    import SvelteTable from "svelte-table";
+    import SvelteTable from 'svelte-table';
 
     export let columns;
     /** @type {any[]} */
     export let rows;
     /** @type {string} */
-    export let sortBy = "";
+    export let sortBy = '';
     /** @type {(string | number)[]} */
     export let expanded = [];
     /** @type {(string | number)[]} */
@@ -30,6 +30,25 @@
     export let clickExpand = null;
     /** @type {function | null} */
     export let clickCell = null;
+
+    // CSS Classes
+    export let classNameTable = 'border-2 border-collapse my-4';
+    export let classNameThead = '';
+    export let classNameTbody = '';
+    export let classNameSelect = '';
+    export let classNameInput = '';
+    export let classNameRow = 'border-2 border-collapse odd:bg-gray-100 hover:bg-gray-300';
+    export let classNameCell = '';
+    export let classNameRowSelected = '!bg-gray-400';
+    export let classNameRowExpanded = 'bg-gray-400';
+    export let classNameExpandedContent = '';
+    export let classNameCellExpand = '';
+
+    const asStringArray = v =>
+        []
+        .concat(v)
+        .filter(v => v !== null && typeof v === 'string' && v !== '')
+        .join(' ');
 </script>
 
 <SvelteTable
@@ -47,17 +66,17 @@
     on:clickRow={clickRow}
     on:clickExpand={clickExpand}
     on:clickCell={clickCell}
-    classNameTable="gan-table border-2 border-collapse mt-4 mb-4"
-    classNameThead="gan-thead"
-    classNameTbody="gan-tbody"
-    classNameSelect="custom-select"
-    classNameInput="custom-input"
-    classNameRow="gan-row border-2 border-collapse cursor-pointer odd:bg-gray-100 hover:bg-gray-300"
-    classNameCell="gan-cell pr-4"
-    classNameRowSelected="row-selected !bg-gray-400"
-    classNameRowExpanded="row-expanded bg-gray-400"
-    classNameExpandedContent="expanded-content"
-    classNameCellExpand="cell-expand">
+    classNameTable={asStringArray(['gan-table', classNameTable])}
+    classNameThead={asStringArray(['gan-thead', classNameThead])}
+    classNameTbody={asStringArray(['gan-tbody', classNameTbody])}
+    classNameSelect={asStringArray(['custom-select', classNameSelect])}
+    classNameInput={asStringArray(['custom-input', classNameInput])}
+    classNameRow={asStringArray(['gan-row', classNameRow])}
+    classNameCell={asStringArray(['gan-cell', classNameCell])}
+    classNameRowSelected={asStringArray(['row-selected', classNameRowSelected])}
+    classNameRowExpanded={asStringArray(['row-expanded', classNameRowExpanded])}
+    classNameExpandedContent={asStringArray(['expanded-content', classNameExpandedContent])}
+    classNameCellExpand={asStringArray(['cell-expand', classNameCellExpand])}>
 
         <!-- Wait for better workaround. See: https://github.com/sveltejs/svelte/issues/5604 -->
 

package/components/Inputbox.svelte

@@ -1,6 +1,6 @@
 <script>
     export let AllowedDecimals = 2;
-    export let DecimalTrenner = ",";
+    export let DecimalTrenner = ',';
     export let KeyDownFunctionOnEnter, KeyDownFunctionOnTab;
     export let Height = 30;
     export let IsPflichtfeld = false;
@@ -8,266 +8,186 @@
     export let MinValue = 0;
     export let MaxValue = 0;
     export let Multiline = false;
-    export let Type = "text";
-    export let Value = "";
+    export let Type = 'text';
+    export let Value = '';
     export let Width = 120;
 
     let errorHidden = true;
-    let errorMessage = "";
-    let style = "height: " + Height + "px; width: " + Width + "px;";
-    let styleError = "width: " + Width + "px;";
-    let tausenderTrenner = ".";
-
-    let allowedNumbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8,", "9"];
-    let allowedDecimalTrenner = [",", "."];
-    let allowedFunctionalKeys = ["ArrowLeft", "ArrowRight", "Backspace", "Delete"];
-    let allowedVorzeichen = "-";
-
-    function checkInput(e)
-    {
-        switch(Type)
-        {
-            case "currency":
-            case "number":
+    let errorMessage = '';
+    let style = `height: ${Height}px; width: ${Width}px;`;
+    let styleError = `width: ${Width}px;`;
+
+    let allowedNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+    let allowedDecimalTrenner = [',', '.'];
+    let allowedFunctionalKeys = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete'];
+    let allowedVorzeichen = '-';
+
+    function checkInput(e) {
+        switch (Type) {
+            case 'currency':
+            case 'number':
                 checkInputNumber(e);
                 break;
 
-            case "email":
+            case 'email':
                 checkInputEMail(e)
                 break;
         }
 
         executeAdditionalFunctions(e);
     }
-    function checkInputNumber(e)
-    {
+    function checkInputNumber(e) {
         let localValueString = Value.toLocaleString();
-        
+
         // Prüfung auf Ziffern
-        if(allowedNumbers.includes(e.key) == true)
-        {
-            if(isBetweenMinMax(e))
-            {
+        if (allowedNumbers.includes(e.key) == true) {
+            if (isBetweenMinMax(e)) {
                 let positionDezimalTrenner = localValueString.indexOf(DecimalTrenner)
-                if(positionDezimalTrenner > -1)
-                {
+                if (positionDezimalTrenner > -1) {
                     let decimals = localValueString.substring(positionDezimalTrenner);
-                    if(decimals.length > AllowedDecimals || (Type == "currency" && decimals.length > 2))
-                    {
+                    if (decimals.length > AllowedDecimals || (Type == 'currency' && decimals.length > 2)) {
                         ignoreInput(e);
                     }
                 }
-            }
-            else
-            {
+            } else {
                 ignoreInput(e);
             }
-        }
-        
-        // Prüfung auf Dezimaltrenner
-        else if (allowedDecimalTrenner.includes(e.key) == true)
-        {
-            if(localValueString.split(DecimalTrenner).length >= 2)
-            {
+        } else if (allowedDecimalTrenner.includes(e.key) == true) { // Prüfung auf Dezimaltrenner
+            if (localValueString.split(DecimalTrenner).length >= 2) {
                 ignoreInput(e);
-            }
-            else if(e.key != DecimalTrenner)
-            {
+            } else if (e.key != DecimalTrenner) {
                 ignoreInput(e);
             }
-        }
-
-        // Prüfung auf Vorzeichen
-        else if (IsVorzeichenErlaubt && e.key == allowedVorzeichen)
-        {
-            if(!isBetweenMinMax(e))
-            {
+        } else if (IsVorzeichenErlaubt && e.key == allowedVorzeichen) { // Prüfung auf Vorzeichen
+            if (!isBetweenMinMax(e)) {
                 ignoreInput(e);
-            }
-            else if(localValueString.startsWith(e.key))
-            {
+            } else if (localValueString.startsWith(e.key)) {
                 ignoreInput(e);
-            }
-            else
-            {
+            } else {
                 Value = e.key + Value;
                 ignoreInput(e);
             }
-        }
-
-        // Prüfung auf Funktionstasten wie [ENTF], [DEL], usw.
-        else if (allowedFunctionalKeys.includes(e.key) == true) { }
-
-        // Alles andere soll nicht erlaubt sein
-        else
-        {
+        } else if (allowedFunctionalKeys.includes(e.key) == true) { // Prüfung auf Funktionstasten wie [ENTF], [DEL], usw.
+			return;
+		} else { // Alles andere soll nicht erlaubt sein
             ignoreInput(e);
         }
     }
-    function checkInputEMail(e)
-    {
-        let mailParts = Value.split("@");
+    function checkInputEMail(e) {
+        let mailParts = Value.split('@');
         errorHidden = false;    // Pauschal einen Fehler anzeigen lassen - spart Codezeilen
 
-        if(mailParts[0].length > 64)
-        {
-            errorMessage = "Der Lokalteil der E-Mail Adresse (vor dem @-Zeichen) darf eine Maximallänge von 64 Zeichen nicht überschreiten."
-        }
-        else if(mailParts.length > 1 && mailParts[0].length < 1)
-        {
-            errorMessage = "Der Lokalteil der E-Mail Adresse (vor dem @-Zeichen) muss eine Mindestlänge von 1 Zeichen besitzen."
-        }
-        else if(mailParts.length > 1 && !mailParts[1].includes("."))
-        {
-            errorMessage = "Der Domainteil der E-Mail Adresse (nach dem @-Zeichen) muss einen Punkt (.) enthalten."
-        }
-        else if(Value.startsWith(".") || Value.endsWith("."))
-        {
-            errorMessage = "Die E-Mail Adresse darf mit einem Punkt weder beginnen noch enden."            
-        }
-        else if(Value.startsWith("@") || Value.endsWith("@"))
-        {
-            errorMessage = "Die E-Mail Adresse darf mit einem @-Zeichen weder beginnen noch enden."            
-        }
-        else if(!Value.includes("@") && e.key != "@")
-        {
-            errorMessage = "@-Zeichen muss enthalten sein."
-        }
-        else if(Value.length > 253)
-        {
-            errorMessage = "Maximallänge: 254 Zeichen.";
-        }
-        else if(Value.length < 6)
-        {
-            errorMessage = "Mindestlänge: 6 Zeichen.";
-        }
-        else
-        {
+        if (mailParts[0].length > 64) {
+            errorMessage = 'Der Lokalteil der E-Mail Adresse (vor dem @-Zeichen) darf eine Maximallänge von 64 Zeichen nicht überschreiten.'
+        } else if (mailParts.length > 1 && mailParts[0].length < 1) {
+            errorMessage = 'Der Lokalteil der E-Mail Adresse (vor dem @-Zeichen) muss eine Mindestlänge von 1 Zeichen besitzen.'
+        } else if (mailParts.length > 1 && !mailParts[1].includes('.')) {
+            errorMessage = 'Der Domainteil der E-Mail Adresse (nach dem @-Zeichen) muss einen Punkt (.) enthalten.'
+        } else if (Value.startsWith('.') || Value.endsWith('.')) {
+            errorMessage = 'Die E-Mail Adresse darf mit einem Punkt weder beginnen noch enden.'
+        } else if (Value.startsWith('@') || Value.endsWith('@')) {
+            errorMessage = 'Die E-Mail Adresse darf mit einem @-Zeichen weder beginnen noch enden.'
+        } else if (!Value.includes('@') && e.key != '@') {
+            errorMessage = '@-Zeichen muss enthalten sein.'
+        } else if (Value.length > 253) {
+            errorMessage = 'Maximallänge: 254 Zeichen.';
+        } else if (Value.length < 6) {
+            errorMessage = 'Mindestlänge: 6 Zeichen.';
+        } else {
             errorHidden = true;
-            errorMessage = ""; // einfach für die Sauberkeit
+            errorMessage = ''; // einfach für die Sauberkeit
         }
     }
-    function executeAdditionalFunctions(e)
-    {
-        switch(e.key)
-		{
-			case "Enter":
-                if(typeof(KeyDownFunctionOnEnter) != 'undefined')
-                {
+    function executeAdditionalFunctions(e) {
+        switch (e.key) {
+			case 'Enter':
+                if (typeof(KeyDownFunctionOnEnter) != 'undefined') {
                     KeyDownFunctionOnEnter();
                 }
 				break;
-			case "Tab":
-                if(typeof(KeyDownFunctionOnTab) != 'undefined')
-                {
+			case 'Tab':
+                if (typeof(KeyDownFunctionOnTab) != 'undefined') {
                     KeyDownFunctionOnTab();
                 }
 				break;
 		}
     }
-    function ignoreInput(e)
-    {
+    function ignoreInput(e) {
         e.preventDefault();
         e.returnValue = false;
     }
-    function isBetweenMinMax(e)
-    {
+    function isBetweenMinMax(e) {
         let isBetween = true;
         let localValueString = Value.toLocaleString()
 
-        if(e.key == allowedVorzeichen)
-        {
+        if (e.key == allowedVorzeichen) {
             localValueString = e.key + localValueString;
-        }
-        else
-        {
+        } else {
             localValueString = localValueString + e.key;
         }
 
         // Replace wird benötigt, da sonst der Vergleich das deutsche "," als Dezimaltrenner nicht erkennt und ignoriert.
-        localValueString = localValueString.replaceAll(",",".");
+        localValueString = localValueString.replaceAll(',', '.');
 
-        if(MinValue == MaxValue || MinValue > MaxValue)
-        {
+        if (MinValue == MaxValue || MinValue > MaxValue) {
             return isBetween;
-        }
-        else if(localValueString < MinValue)
-        {
+        } if (localValueString < MinValue) {
             Value = MinValue;
             isBetween = false;
-        }
-        else if(localValueString > MaxValue)
-        {
+        } else if (localValueString > MaxValue) {
             Value = MaxValue;
             isBetween = false;
         }
         return isBetween;
     }
-    function thisKeyUp(e)
-    {
+    function thisKeyUp() {
         setFieldStyle();
     }
-    function setFieldStyle()
-    {
-        console.log(Value);
-        if(IsPflichtfeld && Value != "")
-        {
-            style = style + " background: #f5fc99;"
-        }
-        else if(IsPflichtfeld && Value == "")
-        {
-            style = style + " background: #fc5d5d;"
+    function setFieldStyle() {
+        if (IsPflichtfeld && Value != '') {
+            style = `${style} background: #f5fc99;`
+        } else if (IsPflichtfeld && Value == '') {
+            style = `${style} background: #fc5d5d;`
         }
     }
 
-    $:if(DecimalTrenner)
-    {
-        // Dezimaltrenner und Tausendertrenner müssen für das US-Amerikanische Format getauscht werden
-        if(DecimalTrenner == allowedDecimalTrenner[1])
-        {
-            tausenderTrenner = allowedDecimalTrenner[0];
-        }
-    }
-    $:if(Type)
-    {
+    $:if (Type) {
         Type = Type.toLocaleLowerCase();
-        switch(Type)
-        {
-            case "currency":
-            case "number":
-                style = style + " text-align: right;"
+        switch (Type) {
+            case 'currency':
+            case 'number':
+                style = `${style} text-align: right;`
                 break;
         }
     }
-    $:if(IsPflichtfeld)
-    {
+    $:if (IsPflichtfeld) {
         setFieldStyle();
     }
 </script>
 
 <!-- Datum -->
 {#if (Type == 'date')}
-<input type="date" style={style} on:keydown={checkInput} on:keyup={thisKeyUp} on bind:value={Value}/>
+    <input type="date" style={style} on:keydown={checkInput} on:keyup={thisKeyUp} on bind:value={Value}/>
 {/if}
 
 <!-- Nummerisch -->
 {#if (Type == 'number')}
-<input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
+    <input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
 {/if}
 
 <!-- Text -->
 {#if (Type == 'text' && !Multiline) || (Type == 'email')}
-<input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
+    <input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
 {/if}
 {#if (Type == 'text' && Multiline)}
-<textarea style={style} on:keydown={checkInput} bind:value={Value}/>
+    <textarea style={style} on:keydown={checkInput} bind:value={Value}/>
 {/if}
 
 <!-- Währung -->
 {#if (Type == 'currency')}
-<input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
+    <input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
 {/if}
 
 <div class="card" hidden={errorHidden} style={styleError}>
     {errorMessage}
-</div>
+</div>

package/declarations.d.ts

@@ -0,0 +1,3 @@
+// Fix svelte-check hint: Could not find a declaration file for module 'svelte-chota'. '/node_modules/svelte-chota/dist/index.js' implicitly has an 'any' type.
+declare module 'svelte-chota';
+declare module 'svelte-table';

package/index.js

@@ -9,10 +9,10 @@ import SaveButton from './components/SaveButton.svelte';
 
 export {
     DataGrid, Datepicker, Inputbox, Dialog, GanTable,
-    AddButton, RemoveButton, SaveButton
+    AddButton, RemoveButton, SaveButton,
 }
 
 import { IDAS } from './api/IDAS';
 import { RESTClient } from './api/RESTClient';
 
-export { IDAS, RESTClient };
+export { IDAS, RESTClient };

package/jsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        /**
+         * Typecheck JS in `.svelte` and `.js` files by default.
+         * Disable this if you'd like to use dynamic types.
+         */
+        "checkJs": false, // Default: true
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "skipLibCheck": true,
+        /**
+         * To have warnings / errors of the Svelte compiler at the
+         * correct position, enable source maps by default.
+         */
+        "sourceMap": true,
+        "strict": true
+    }
+}

package/package.json

@@ -1,14 +1,23 @@
 {
   "name": "@gandalan/weblibs",
-  "version": "0.0.26",
+  "version": "0.0.29",
   "description": "WebLibs for Gandalan JS/TS/Svelte projects",
   "author": "Philipp Reif",
   "license": "ISC",
   "main": "index",
   "typings": "index",
+  "scripts": {
+    "check": "svelte-check",
+    "check:watch": "svelte-check --watch",
+    "lint": "eslint ."
+  },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.18.9",
     "chota": "^0.8.0",
+    "eslint": "^8.21.0",
+    "eslint-plugin-svelte3": "^4.0.0",
     "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
     "svelte-chota": "^1.8.6"
   },
   "dependencies": {