@gandalan/weblibs 0.0.1

package/api/AuthStore.js

@@ -0,0 +1,8 @@
+import { get, writable } from "svelte/store";
+
+export const APP_TOKEN = "66B70E0B-F7C4-4829-B12A-18AD309E3970";
+export const AuthToken = writable(localStorage.getItem("AuthToken"));
+export const MandantGuid = writable(localStorage.getItem("MandantGuid"));
+export const ApiBaseUrl = writable(localStorage.getItem("ApiBaseUrl") || "https://api.dev.idas-cloudservices.net/api");
+export const SiteBaseUrl = writable(window.location.protocol + "//" + window.location.host);
+export const SSOAuthUrl = writable(get(ApiBaseUrl).replace("/api", "") + "/SSO?a=" + APP_TOKEN + "&r=%target%?t=%token%%26m=%mandant%");

package/api/api.js

@@ -0,0 +1,121 @@
+import axios from 'axios';
+import { AuthToken, ApiBaseUrl } from "./AuthStore";
+import { get } from 'svelte/store';
+
+export class API 
+{
+    lastError = '';
+    token = "";
+    baseurl = "";
+
+    constructor()
+    {
+        this.lastError = "";
+        this.baseurl = get(ApiBaseUrl);
+        this.token = get(AuthToken);
+        console.log("Base: " + this.baseurl + " Token: " + this.token);
+
+        if (this.token) {
+            axios.defaults.headers.common['X-Gdl-AuthToken'] = this.token;
+        }
+    }
+
+    async get(uri)
+    {
+        try {
+            console.log("GET " + this.baseurl + uri);
+            const response = await axios.get(this.baseurl + uri);
+            this.lastError = '';
+            return response.data;
+        }
+        catch (error) {
+            this.checkError(error);
+        }
+    }
+
+    async getFile(uri)
+    {
+        try {
+            const response = await axios.get(this.baseurl + uri, { responseType: 'blob' });
+            console.log(response);
+
+            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) {
+            this.checkError(error);
+        }
+    }
+
+    async getRaw(uri)
+    {
+        let response = {};
+        try {
+            response = await axios.get(this.baseurl + uri, { withCredentials: true })
+            console.log(response);
+            this.lastError = '';
+        }
+        catch (error) {
+            this.checkError(error);
+        }
+        return response;
+    }
+
+    async post(uri, formData) 
+    {
+        try {
+            const response = await axios.post(this.baseurl + uri, formData, { withCredentials: true });
+            //console.log(JSON.stringify(response));
+            this.lastError = '';
+            return response;
+        }
+        catch (error) {
+            this.checkError(error);
+        }
+    }
+
+    async put(uri, formData) 
+    {
+        try {
+            console.log(`PUT to ${this.baseurl}${uri}`);
+            const response = await axios.put(this.baseurl + uri, formData, { withCredentials: true });
+            this.lastError = '';
+            return response;
+        }
+        catch (error) {
+            this.checkError(error);
+        }
+    }
+
+    async delete(uri)
+    {
+        try
+        {
+            console.log(`DELETE to ${this.baseurl}${uri}`);
+            const response = await axios.delete(this.baseurl + uri, { withCredentials: true });
+            this.lastError = '';
+            return response;
+        }
+        catch (error) {
+            this.checkError(error);
+        }
+    }
+
+    checkError(error)
+    {
+        let status = error && error.response ? error.response.status : -1;
+        let message = error ? error.message : "?";
+        console.log("API Error " + status + ": " + message);
+        this.lastError = message;
+        if (status === 401 || status === 403) {
+            AuthToken.set(null);
+            localStorage.setItem("AuthToken", null);
+        }
+    }
+}

package/api/mandantenApi.js

@@ -0,0 +1,12 @@
+import { API } from './api';
+import { AuthToken } from "./AuthStore";
+//import mandanten from '../data/mandanten.json';
+
+export function getAll()
+{
+    //return mandanten;
+    if (AuthToken)
+        return new API().get('/Mandanten');
+    else
+        return [];
+}

package/api/nachrichtenApi.js

@@ -0,0 +1,46 @@
+import { API } from './api';
+import { get } from 'svelte/store'
+import { MandantGuid } from "./AuthStore";
+
+const niceContextNames = new Map();
+niceContextNames.set("position", "Positionserfassung");
+niceContextNames.set("start", "Programmstart");
+
+export async function getAll()
+{
+    let api = getNewAPI();
+    let result = await api.get('/NachrichtenKonfig?besitzerMandantGuid=' + get(MandantGuid));     
+    result = result || [];
+    result.forEach(n => {
+        n.anzeigeText = n.nachricht && n.nachricht.length > 30 ? n.nachricht.substr(0,30) + "..." : n.nachricht;
+        if (n.context && niceContextNames.has(n.context))
+        {            
+            n.anzeigeText += " (Anzeige bei " + niceContextNames.get(n.context) + ")";
+        }        
+    });
+    return result;
+}
+
+export async function addNachricht(nachricht)
+{
+    nachricht.besitzerMandantGuid = get(MandantGuid);
+    if (!nachricht.gueltigAb) nachricht.gueltigAb = null;
+    if (!nachricht.gueltigBis) nachricht.gueltigBis = null;
+
+    let api = getNewAPI();
+    console.log(nachricht);
+    return await api.post('/NachrichtenKonfig', nachricht);        
+}
+
+export async function removeNachricht(nachricht)
+{
+    let api = getNewAPI();
+    return await api.delete('/NachrichtenKonfig?nachrichtGuid=' + nachricht.nachrichtGuid);
+}
+
+function getNewAPI()
+{
+    let api = new API();
+    api.baseurl = "";
+    return api;
+}

package/components/AddButton.svelte

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

package/components/DataGrid.svelte

@@ -0,0 +1,72 @@
+<script>
+    import { createEventDispatcher } from 'svelte';
+    const dispatch = createEventDispatcher();
+    import { Icon } from 'svelte-chota';
+
+    export let items = [];
+    export let selectedItem = {};
+    export let standardItem;
+    export let displayProperty = "";
+    export let header = "Überschrift";
+    export let key = "Guid";
+    export let marker = null;
+    export let markerField = "";
+
+    function setCurrent(item)
+    {
+        selectedItem = item;
+        console.log(item);
+        dispatch("selectedItemChanged", item);
+    }
+</script>
+
+<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>
+        {/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>
+        {/each}
+    </div>
+</div>
+
+<style>
+.datagrid {
+    border: 1px solid var(--color-darkGrey);
+    background-color: var(--color-grey);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-content: flex-start;
+    cursor: pointer;
+}
+
+.dgheader {
+    background-color: var(--color-grey);
+    padding: 4px 4px 4px 8px;
+    flex: 1;
+}
+ 
+.dgrow {
+    margin-left: 8px;
+    border-bottom: 1px solid var(--color-darkGrey);
+    background-color: #fff;
+    padding: 4px;
+    flex: 1;
+}
+
+.selected {
+    background-color: var(--color-selected); 
+    color: var(--color-selected-text);    
+}
+
+</style>

package/components/Datepicker.svelte

@@ -0,0 +1,301 @@
+<script>
+    export let Height = 30;
+    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"];
+
+    let inputField, buttonStyle, divStyle, inputStyle;
+    let background = backgroundNormal;
+    let buttonHeight = Height - 6;
+    let buttonImageHeight = Height - 10;
+    let datePickerHidden = true;
+    let errorHidden = true;
+    let inputHeight = Height - 2;
+    let inputWidth = Width - Height - 10;
+
+    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 currentJahr = new Date().getFullYear();
+    let currentMonat = monate[new Date().getMonth()];
+    let wochenImMonat = [];
+    let monatIndex = 0;
+
+    function alertFalschesDatum()
+    {
+        background = backgroundFalschesDatum;
+        errorHidden = false;
+        setFieldStyle();
+    }
+    function backToNormal()
+    {
+        background = backgroundNormal;
+        errorHidden = true;
+        setFieldStyle();
+    }
+    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)
+        {
+            Value = Value + allowedSonderzeichen;
+        }
+        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))
+        {
+            error = true;
+        }
+        else
+        {
+            error = false;
+        }
+
+        // Prüfung, ob der Tag korrekt eingegeben wurde
+        if(localTag < 1 || localTag > 31)
+        {
+            error = true;
+        }
+
+        if(localMonat != "undefined")
+        {
+            let localAllowedTage = allowedTage[inhalt[1]];
+            if(localAllowedTage == "undefined")
+            {
+                error = true;
+            }
+            if(localTag > localAllowedTage)
+            {
+                error = true;
+            }
+        }
+
+        if(error)
+        {
+            alertFalschesDatum();
+        }
+        else
+        {
+            backToNormal();
+        }
+    }
+    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 
+                // am passenden Wochentag startet => das macht es in der Anzeigeschleife leichter
+                for(let bufferCounter = 0; bufferCounter < localTagIndex; bufferCounter++)
+                {
+                    woche = [...woche, ''];
+                }
+            }
+            woche = [...woche, counter+1];
+
+            tagesWochenCounter++;
+            if(woche.length >= 7)
+            {
+                wochenImMonat = [...wochenImMonat, woche]
+                woche = [];
+                tagesWochenCounter = 0;
+            }
+            if(counter == tageImMonat-1)
+            {
+                wochenImMonat = [...wochenImMonat, woche]
+                woche = [];
+                tagesWochenCounter = 0;
+            }
+        }
+    }
+    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 setJahr(selectedJahr)
+    {
+        currentJahr = selectedJahr.currentJahr;
+        daysInMonth();
+    }
+    function setMonat(selectedMonat)
+    {
+        currentMonat = selectedMonat.currentMonat;
+        daysInMonth();
+    }
+    function setPlaceholder(tag)
+    {
+        if(tag != "")
+        {
+            //Placeholder = getFormattedDate(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)
+            {
+                ignoreInput(e);
+            }
+            checkGueltigesDatum();
+        }
+        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)
+            {
+                ignoreInput(e);
+            }
+        }
+        else if (allowedFunctionalKeys.includes(e.key) == true) { }
+        else 
+        {
+            ignoreInput(e);
+        }
+	}
+    function getValueFormatted(oldValue)
+    {
+        let localTag = (new Date(oldValue).getUTCDate()).toString();
+        let localMonat = (new Date(oldValue).getMonth()+1).toString();
+        let localJahr = new Date(oldValue).getUTCFullYear().toString();
+
+        if(localMonat.length < 2)
+        {
+            localMonat = "0" + localMonat;
+        }
+        if(localTag.length < 2)
+        {
+            localTag = "0" + localTag;
+        }
+        return localTag + "." + localMonat + "." + localJahr;
+    }
+
+    $:if(true)
+    {
+        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}>
+    <button style={buttonStyle} on:click={() => datePickerHidden = !datePickerHidden}>
+        <img src="calendar.png" alt="" height={buttonImageHeight}>
+        <!-- [...] -->
+    </button>
+
+    <div class="card" hidden={errorHidden} style="margin-top: 40px; position:absolute;">
+        Ungültiges Datum
+    </div>
+</div>
+<div class="card" hidden={datePickerHidden} style="background: white; border: 1px solid black; border-radius: 10px; margin-top: 5px; position:absolute;">
+    <div style="margin: 10px;">
+        <div style="display: flex;">
+            <select class="buttonMonthSelected" bind:value={currentMonat} on:click={() => setMonat({currentMonat})}>
+                {#each monate as monatAuswahl}
+                    <option class="buttonMonthSelector">{monatAuswahl}</option>
+                {/each}
+            </select>
+            <input type="number" style="height: 40px; margin-left: 10px; width: 85px;" bind:value={currentJahr} on:click={() => setJahr({currentJahr})}>
+        </div>
+        <br>
+        <table>
+            <tr>
+                {#each tageKurz as tag}
+                    <td><b>{tag}</b></td>
+                {/each}
+            </tr>
+            {#each wochenImMonat as woche}
+            <tr>
+                {#each woche as tageInWoche}
+                    <td>
+                        <button class="buttonTag" on:mouseover={() => setPlaceholder(tageInWoche)} on:click={() => setValue(tageInWoche)}>
+                            {tageInWoche}
+                        </button>
+                    </td>
+                {/each}
+            </tr>
+            {/each}
+        </table>
+    </div>
+</div>
+
+<style>
+    td, tr{
+        margin: 0px;
+        padding: 0px;
+    }
+    .buttonTag{
+        background-color: transparent;
+        border: 0px;
+        height: 35px;
+        text-align: center;
+        width: 35px;
+    }
+    .buttonTag:hover{
+        background-color:cornflowerblue;
+        color: white;
+    }
+    .buttonMonthSelected{
+        background-color: transparent;
+        border-radius: 5px;
+        text-align: left;
+        width: 115px;
+    }
+    .buttonMonthSelector{
+        background-color: transparent;
+        border: 0px;
+        text-align: left;
+        width: 115px;
+    }
+    .buttonMonthSelector:hover{
+        background-color:cornflowerblue;
+        color: white;
+    }
+</style>

package/components/Inputbox.svelte

@@ -0,0 +1,273 @@
+<script>
+    export let AllowedDecimals = 2;
+    export let DecimalTrenner = ",";
+    export let KeyDownFunctionOnEnter, KeyDownFunctionOnTab;
+    export let Height = 30;
+    export let IsPflichtfeld = false;
+    export let IsVorzeichenErlaubt = true;
+    export let MinValue = 0;
+    export let MaxValue = 0;
+    export let Multiline = false;
+    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":
+                checkInputNumber(e);
+                break;
+
+            case "email":
+                checkInputEMail(e)
+                break;
+        }
+
+        executeAdditionalFunctions(e);
+    }
+    function checkInputNumber(e)
+    {
+        let localValueString = Value.toLocaleString();
+        
+        // Prüfung auf Ziffern
+        if(allowedNumbers.includes(e.key) == true)
+        {
+            if(isBetweenMinMax(e))
+            {
+                let positionDezimalTrenner = localValueString.indexOf(DecimalTrenner)
+                if(positionDezimalTrenner > -1)
+                {
+                    let decimals = localValueString.substring(positionDezimalTrenner);
+                    if(decimals.length > AllowedDecimals || (Type == "currency" && decimals.length > 2))
+                    {
+                        ignoreInput(e);
+                    }
+                }
+            }
+            else
+            {
+                ignoreInput(e);
+            }
+        }
+        
+        // Prüfung auf Dezimaltrenner
+        else if (allowedDecimalTrenner.includes(e.key) == true)
+        {
+            if(localValueString.split(DecimalTrenner).length >= 2)
+            {
+                ignoreInput(e);
+            }
+            else if(e.key != DecimalTrenner)
+            {
+                ignoreInput(e);
+            }
+        }
+
+        // Prüfung auf Vorzeichen
+        else if (IsVorzeichenErlaubt && e.key == allowedVorzeichen)
+        {
+            if(!isBetweenMinMax(e))
+            {
+                ignoreInput(e);
+            }
+            else if(localValueString.startsWith(e.key))
+            {
+                ignoreInput(e);
+            }
+            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
+        {
+            ignoreInput(e);
+        }
+    }
+    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
+        {
+            errorHidden = true;
+            errorMessage = ""; // einfach für die Sauberkeit
+        }
+    }
+    function executeAdditionalFunctions(e)
+    {
+        switch(e.key)
+		{
+			case "Enter":
+                if(typeof(KeyDownFunctionOnEnter) != 'undefined')
+                {
+                    KeyDownFunctionOnEnter();
+                }
+				break;
+			case "Tab":
+                if(typeof(KeyDownFunctionOnTab) != 'undefined')
+                {
+                    KeyDownFunctionOnTab();
+                }
+				break;
+		}
+    }
+    function ignoreInput(e)
+    {
+        e.preventDefault();
+        e.returnValue = false;
+    }
+    function isBetweenMinMax(e)
+    {
+        let isBetween = true;
+        let localValueString = Value.toLocaleString()
+
+        if(e.key == allowedVorzeichen)
+        {
+            localValueString = e.key + localValueString;
+        }
+        else
+        {
+            localValueString = localValueString + e.key;
+        }
+
+        // Replace wird benötigt, da sonst der Vergleich das deutsche "," als Dezimaltrenner nicht erkennt und ignoriert.
+        localValueString = localValueString.replaceAll(",",".");
+
+        if(MinValue == MaxValue || MinValue > MaxValue)
+        {
+            return isBetween;
+        }
+        else if(localValueString < MinValue)
+        {
+            Value = MinValue;
+            isBetween = false;
+        }
+        else if(localValueString > MaxValue)
+        {
+            Value = MaxValue;
+            isBetween = false;
+        }
+        return isBetween;
+    }
+    function thisKeyUp(e)
+    {
+        setFieldStyle();
+    }
+    function setFieldStyle()
+    {
+        console.log(Value);
+        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)
+    {
+        Type = Type.toLocaleLowerCase();
+        switch(Type)
+        {
+            case "currency":
+            case "number":
+                style = style + " text-align: right;"
+                break;
+        }
+    }
+    $:if(IsPflichtfeld)
+    {
+        setFieldStyle();
+    }
+</script>
+
+<!-- Datum -->
+{#if (Type == 'date')}
+<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}/>
+{/if}
+
+<!-- Text -->
+{#if (Type == 'text' && !Multiline) || (Type == 'email')}
+<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}/>
+{/if}
+
+<!-- Währung -->
+{#if (Type == 'currency')}
+<input style={style} on:keydown={checkInput} on:keyup={thisKeyUp} bind:value={Value}/>
+{/if}
+
+<div class="card" hidden={errorHidden} style={styleError}>
+    {errorMessage}
+</div>

package/components/RemoveButton.svelte

@@ -0,0 +1,11 @@
+<script>
+    import { Button } from 'svelte-chota';
+    import { mdiTrashCan } from '@mdi/js'
+    
+    export let Handler;
+    export let disabled;
+    export let title;
+</script>
+
+<Button error title={title} on:click={Handler} icon={mdiTrashCan} {disabled}>
+</Button>

package/components/SaveButton.svelte

@@ -0,0 +1,12 @@
+<script>
+    import { Button } from 'svelte-chota';
+    import { mdiCheck } from '@mdi/js'
+    
+    export let Handler;
+    export let disabled;
+    export let title;
+</script>
+
+<Button primary title={title} on:click={Handler} icon={mdiCheck} {disabled}>
+    {title}
+</Button>

package/components/index.js

@@ -0,0 +1,11 @@
+import AddButton from './AddButton.svelte';
+import DataGrid from './DataGrid.svelte';
+import Datepicker from './Datepicker.svelte';
+import Inputbox from './Inputbox.svelte';
+import RemoveButton from './RemoveButton.svelte';
+import SaveButton from './SaveButton.svelte';
+
+export {
+    DataGrid, Datepicker, Inputbox,
+    AddButton, RemoveButton, SaveButton
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@gandalan/weblibs",
+  "version": "0.0.1",
+  "description": "WebLibs for Gandalan JS/TS/Svelte projects",
+  "author": "Philipp Reif",
+  "license": "ISC",
+  "devDependencies": {
+    "chota": "^0.8.0",
+    "svelte": "^3.38.3",
+    "svelte-chota": "^1.8.4"
+  },
+  "dependencies": {
+    "@mdi/js": "^5.9.55",
+    "axios": "^0.21.1",
+    "uuid": "^8.3.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gandalan/idas-client-libs"
+  },
+  "keywords": [
+    "gandalan"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}