@public-ui/components 1.1.15-rc.2 → 1.1.15-rc.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/cheat-sheet.html
CHANGED
|
@@ -9,9 +9,9 @@
|
|
|
9
9
|
<link href="https://fonts.cdnfonts.com/css/roboto" rel="stylesheet" />
|
|
10
10
|
<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet" />
|
|
11
11
|
<script type="module">
|
|
12
|
-
import { register } from 'https://esm.sh/@public-ui/core';
|
|
13
|
-
import { defineCustomElements } from 'https://esm.sh/@public-ui/components/dist/loader';
|
|
14
|
-
import { MAPZ } from 'https://esm.sh/@public-ui/themes';
|
|
12
|
+
import { register } from 'https://esm.sh/@public-ui/core@1.1.15-rc.3';
|
|
13
|
+
import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.1.15-rc.3/dist/loader';
|
|
14
|
+
import { MAPZ } from 'https://esm.sh/@public-ui/themes@1.1.15-rc.3';
|
|
15
15
|
register(MAPZ, defineCustomElements)
|
|
16
16
|
.then(() => {})
|
|
17
17
|
.catch(console.warn);
|
|
@@ -78,9 +78,9 @@
|
|
|
78
78
|
<pre>
|
|
79
79
|
<code class="language-html"><head>
|
|
80
80
|
<script type="module">
|
|
81
|
-
import { register } from 'https://esm.sh/@public-ui/core';
|
|
82
|
-
import { defineCustomElements } from 'https://esm.sh/@public-ui/components/dist/loader';
|
|
83
|
-
import { MAPZ } from 'https://esm.sh/@public-ui/themes';
|
|
81
|
+
import { register } from 'https://esm.sh/@public-ui/core@1.1.15-rc.3';
|
|
82
|
+
import { defineCustomElements } from 'https://esm.sh/@public-ui/components@1.1.15-rc.3/dist/loader';
|
|
83
|
+
import { MAPZ } from 'https://esm.sh/@public-ui/themes@1.1.15-rc.3';
|
|
84
84
|
register([MAPZ], [defineCustomElements])
|
|
85
85
|
.then(() => {})
|
|
86
86
|
.catch(console.warn);
|
package/custom-elements.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const FORMULAR_FORM=LeanUpForm.FormFactory.createForm("anschrift",{anschrift:{anrede:{ansprache:"Frau",vorname:"Elke",nachname:"Mustermann"},adresse:{strasse:"Musterstraße",hausnummer:"1a",ort:"Musterstadt",plz:"54321"}},email:"",text:"",datum:"2000-12-24",password:"Passwort",betrag:45,status:0,agb:null,datenschutz:null});console.log(FORMULAR_FORM);const ANSCHRIFT_FORM=FORMULAR_FORM.getControl("anschrift"),ANREDE_FORM=ANSCHRIFT_FORM.getControl("anrede"),ANREDE_ANSPRACHE_INPUT=ANREDE_FORM.getControl("ansprache"),ANREDE_VORNAME_INPUT=ANREDE_FORM.getControl("vorname"),ANREDE_NACHNAME_INPUT=ANREDE_FORM.getControl("nachname");ANREDE_ANSPRACHE_INPUT.label="Anrede",ANREDE_ANSPRACHE_INPUT.mandatory=!0,ANREDE_VORNAME_INPUT.label="Vorname",ANREDE_VORNAME_INPUT.mandatory=!0,ANREDE_VORNAME_INPUT.info="Bitte geben Sie einen schönen Vorname ein.",ANREDE_NACHNAME_INPUT.label="Nachname",ANREDE_VORNAME_INPUT.changeListeners.add(((...a)=>{console.log(...a)}));class DemoFehler extends LeanUpForm.AbstractValidator{constructor(){super("Test")}isValid(a){return!("string"==typeof a&&a.length>5||"boolean"==typeof a&&!1===a)}}class DemoFormatter extends LeanUpForm.AbstractFormatter{format(a){return a.toLocaleUpperCase()}parse(a){return a}}class Demo4SignSepFormatter extends LeanUpForm.AbstractFormatter{format(a){const e=a.match(/(.{1,4})/g);return Array.isArray(e)?e.join(" "):a}parse(a){return a.replace(/ +/g,"")}}class DemoMaxLength extends LeanUpForm.AbstractFormatter{format(a){return a}parse(a){return a.substring(0,6)}}const VALIDATION_HANDLER=new LeanUpForm.ValidationHandler;VALIDATION_HANDLER.validators.add(new DemoFehler),ANREDE_VORNAME_INPUT.setValidationHandler(VALIDATION_HANDLER),ANREDE_NACHNAME_INPUT.setValidationHandler(VALIDATION_HANDLER);const FORMAT_HANDLER=new LeanUpForm.FormatHandler;FORMAT_HANDLER.formatters.add([new DemoFormatter,new Demo4SignSepFormatter,new DemoMaxLength]),ANREDE_VORNAME_INPUT.setFormatHandler(FORMAT_HANDLER),document.querySelector("#kol-input-text")._control=ANREDE_VORNAME_INPUT;const ADRESSE_FORM=ANSCHRIFT_FORM.getControl("adresse"),ADRESSE_STRASSE_INPUT=ADRESSE_FORM.getControl("strasse"),ADRESSE_HAUSNUMMER_INPUT=ADRESSE_FORM.getControl("hausnummer"),ADRESSE_PLZ_INPUT=ADRESSE_FORM.getControl("plz"),ADRESSE_ORT_INPUT=ADRESSE_FORM.getControl("ort");ADRESSE_STRASSE_INPUT.label="Straße",ADRESSE_HAUSNUMMER_INPUT.label="Hausnummer",ADRESSE_PLZ_INPUT.label="Postleitzahl",ADRESSE_ORT_INPUT.label="Ort";const STATUS_INPUT=FORMULAR_FORM.getControl("status"),EMAIL_INPUT=FORMULAR_FORM.getControl("email"),TEXT_INPUT=FORMULAR_FORM.getControl("text"),BETRAG_INPUT=FORMULAR_FORM.getControl("betrag"),AGB_INPUT=FORMULAR_FORM.getControl("agb"),DATENSCHUTZ_INPUT=FORMULAR_FORM.getControl("datenschutz");STATUS_INPUT.label="Status",EMAIL_INPUT.label="E-Mail-Adresse",EMAIL_INPUT.info="Bitte geben Sie hier eine E-Mail-Adresse ein.",TEXT_INPUT.label="Text",TEXT_INPUT.mandatory=!0,TEXT_INPUT.setValidationHandler(VALIDATION_HANDLER),BETRAG_INPUT.label="Betrag",BETRAG_INPUT.mandatory=!0,BETRAG_INPUT.setValidationHandler(VALIDATION_HANDLER),AGB_INPUT.label="Ich akzeptiere die Allgemeinen Geschäftsbedingungen.",AGB_INPUT.mandatory=!0,AGB_INPUT.setValidationHandler(VALIDATION_HANDLER),DATENSCHUTZ_INPUT.label="Ich akzeptiere die Datenschutzerklärung.";const PASSWORD_INPUT=FORMULAR_FORM.getControl("password"),DATUM_INPUT=FORMULAR_FORM.getControl("datum");function domReady(){document.querySelector("#anrede-adapter")._control=ANREDE_ANSPRACHE_INPUT;const a=[{label:"Herr",value:"Herr"},{label:"Frau",value:"Frau"}];document.querySelectorAll("kol-input-radido").forEach((e=>{e._list=a,e._on={onChange:console.log}})),document.querySelector("kol-form").addEventListener("submit",(a=>{a.stopPropagation(),console.log(a,ANREDE_FORM.getData())}));document.querySelectorAll(".datenschutz-checkbox").forEach((a=>{a._control=AGB_INPUT})),document.querySelector("#new-input-checkbox")._control=AGB_INPUT,document.querySelector("#new-input-checkbox-leanup")._control=AGB_INPUT,document.querySelectorAll("kol-input-rasdio").forEach((e=>{e._list=a})),document.querySelector("#kol-input-text")._control=ANREDE_VORNAME_INPUT,document.querySelector("kol-input-text.vorname")._list=NAMEN,document.querySelector("#new-input-email")._control=EMAIL_INPUT,document.querySelector("#new-input-color")._control=new LeanUpForm.InputControl("color",{label:"Farbe",value:"#ff0000"}),document.querySelector("#new-input-file")._control=new LeanUpForm.InputControl("file",{label:"Datei(en) hochladen"}),document.querySelector("#new-input-range")._control=BETRAG_INPUT,document.querySelector("#new-textarea")._control=TEXT_INPUT;const e=setInterval((()=>{TEXT_INPUT.value=`${TEXT_INPUT.value}A`,document.querySelector('kol-textarea[_hide-label=""]')._value=TEXT_INPUT.value}),1e3),n=setTimeout((()=>{clearInterval(e),clearTimeout(n)}),10);STATUS_INPUT.value="['c1','2']",document.querySelectorAll("kol-select").forEach((a=>{a._on={onChange:console.log}})),document.querySelectorAll("kol-select.list4value").forEach((a=>{a._list="[{'value':null,'label':'- keine Auswahl -'},{'label':'Optgroup 1','options':[{'value':'a1','label':'A1'},{'disabled':true,'value':'b1','label':'B1'},{'label':'Optgroup 2','options':[{'value':'a2','label':'A2'},{'value':'b2','label':'B2'}]},{'value':'c1','label':'C1'}]},{'value':'1','label':'Gute Laune'},{'value':'2','label':'Geht so'},{'value':'3','label':'Schlechte Laune'},{'value':'4','label':'ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen'}]"})),document.querySelectorAll("kol-select.value4list").forEach((a=>{a._value=STATUS_INPUT.value})),setTimeout((()=>{document.querySelectorAll("kol-select.value4list").forEach((a=>{a._list="[{'value':null,'label':'- keine Auswahl -'},{'label':'Optgroup 1','options':[{'value':'a1','label':'A1'},{'disabled':true,'value':'b1','label':'B1'},{'label':'Optgroup 2','options':[{'value':'a2','label':'A2'},{'value':'b2','label':'B2'}]},{'value':'c1','label':'C1'}]},{'value':'1','label':'Gute Laune'},{'value':'2','label':'Geht so'},{'value':'3','label':'Schlechte Laune'},{'value':'4','label':'ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen'}]"})),document.querySelectorAll(".select-adapter").forEach((a=>{a._control=STATUS_INPUT})),document.querySelectorAll("kol-select.list4value").forEach((a=>{a._value=STATUS_INPUT.value}))}),5e3),document.querySelector("#new-input-date")._control=DATUM_INPUT,document.querySelector("#filter-table")._data=DATA,document.querySelector("#filter-input")._on={onChange:a=>{console.log(a.target.value),document.querySelector("#filter-table")._data=DATA.filter((e=>{const n=new RegExp(a.target.value,"i");return n.test(e.montag)||n.test(e.dienstag)||n.test(e.mittwoch)||n.test(e.donnerstag)||n.test(e.freitag)}))}};var t=document.querySelector("#fix-select-multi");t instanceof HTMLElement&&(t._list=[{label:"Baum",value:Date.now()},{label:"Baum",value:Date.now()}],t._on={onChange:(...a)=>{console.log("onChange",a),setTimeout((()=>{t._list=[{label:"Baum",value:Date.now()}].concat(t._list),setTimeout((()=>{console.log(t._value)}),100)}),100)}})}PASSWORD_INPUT.label="Passwort",DATUM_INPUT.label="Datum",ANREDE_ANSPRACHE_INPUT.readonly=!0,ANREDE_ANSPRACHE_INPUT.changeListeners.add((a=>{ANREDE_VORNAME_INPUT.disabled=!ANREDE_VORNAME_INPUT.disabled,ANREDE_NACHNAME_INPUT.readonly=!ANREDE_NACHNAME_INPUT.readonly,AGB_INPUT.readonly=!AGB_INPUT.readonly,DATENSCHUTZ_INPUT.disabled=!DATENSCHUTZ_INPUT.disabled})),ANREDE_VORNAME_INPUT.changeListeners.add((()=>{})),ANREDE_NACHNAME_INPUT.changeListeners.add((()=>{document.querySelector("#nachname").setAttribute("_readonly",ANREDE_NACHNAME_INPUT.readonly)})),document.onreadystatechange=function(){"complete"==document.readyState&&setTimeout(domReady,1e3)};const DATA=[{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Hong",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"}],NAMEN=["Lucy","Lukas","Ella","Konstantin","Amy","Ben","Emely","Jonas","Finja","Elias","Amelie","Niklas","Luise","David","Frieda","Oskar","Katharina","Philipp","Romy","Leon","Juna","Noah","Theresa","Luis","Eva","Paul","Julia","Finn","Anna","Felix","Carla","Julian","Paulina","Maximilian","Elisabeth","Henry","Rosa","Tim","Mia","Karl","Maya","Friedrich","Selma","Peter","Edda","Quirin","Flora","Liam","Berenike","Linus","Simone","Quentin","Elena","Paul","Meike","Johannes","Susanne","Alexander","Annika","Anton","Augusta","Aras","Alba","Asis","Wilma","Adrian","Annegret","Arthur","Aglaia","Adam","Aaliyah","Arian","Annabelle","Amos","Alma","Arik","Alicia","Ake","Anette","Altfried","Astrid","Ari","Anisha","Andreas","Antke","Allessandro","Abigail","Achim","Aideen","Ben","Aini","Bela","Aida","Baldur","Aamenah","Benedikt","Ariane","Beat","Adriana","Bernd","Alexandra","Bertram","Ava","Blue","Arielle","Badi","Allissa","Batiste","Aamu","Bastian","Arzu","Caleb","Anouk","Caspar","Andrea","Calvin","Bianca","Cadmus","Blanka","Christoph","Benita","Cedrik","Bettina","Camern","Bamika","Carsten","Bente","Cainan","Barbara","Cem","Berit","Carl","Bentje","Cyranus","Birte","Curt","Brigitte","Daniel","Christiane","Dominik","Charlotte","Darius","Catherina","Dario","Caroline","Dag","Caren","Diminic","Caecilia","Damian","Celine","Diego","Coco","Dieter","Chaya","Demian","Dalia","Dewis","Deenah","Dirk","Daphne","Donald","Delia","Enzo","Dari","Emil","Doerte","Erik","Djamila","Edwin","Dominique","Eliah","Doerte","Ethan","Dorothee","Erwin","Emira","Eliot","Emily","Enes","Elif","Emilio","Ellen","Ebbo","Enna","Eberhard","Ebba","Edgar","Eleni","Fabrizius","Freya","Finn","Fiona","Fabian","Franziska","Fabio","Luzia","Finjas","Fabienne","Franz","Mädchen","Jungen","Fiona","Falko","Felina","Fatih","Felicitas","Fynn","Fabia","Flavio","Fabiola","Fady","Fabrizia","Fritz","Filomae","Falko","Floris","Gabriel","Fae","Gustav","Fanny","Guiseppe","Fritzi","Günter","Greta","Gerhard","Gabrielle","Georg","Grit","Gel","Gwen","Gerald","Gabi","Geoffrey","Gila","Gismund","Giorgina","Giulio","Gisele","Godo","Heike","Henri","Hanna","Hannes","Helena","Henry","Haima","Henrik","Heike","Hendrik","Helen","Heiko","Isabell","Haku","Ida","Hanno","Ilona","Hugo","Ingrid","Henryk","Iris","Hardy","Ira","Hagar","Iara","Hafiz","Ivette","Haile","Irma","Hakan","Jardis","Hasso","Juni","Harry","Juna","Hauke","Josephine","Harun","Jella","Hayo","Jill","Idil","Jennifer","Ian","Jakobine","Izzy","Jessika","Ibrahim","Julie","Igor","Jasmin","Jack","Joana","Jules","Jaqueline","Julian","Jonna","Jan","Jean","Jakob","Janis","Jaap","Jodi","Jonathan","Jen","Jannik","Justyna","Jona","Jutta","Jannis","Kathleen","Joel","Kayra","Jonte","Klara","Jarin","Kiara","Jörn","Kathrin","Jari","Catrin","Jannik","Kiki","Jukka","Judith","Samo","Celia","Jaakov","Kaaria","Jeremy","Kerstin","Jarne","Kim","Kilian","Kader","Kai","Kaisa","Kylan","Liv","Kristian","Livia","Kasper","Louisa","Kadmos","Lucy","Klaus","Lina","Kaarle","Lena","Kevin","Leonie","Kadir","Lea","Konrad","Leni","Lukas","Lotta","Leon","Laura","Leopold","Lara","Luca","Lia","Linas","Lisa","Roland","Luna","Leo","Linda","Lennard","Laureen","Luke","Liv","Lenny","Liz","Lasse","Mona","Lion","Mareen","Luca","Mathilda","Lutz","Marlene","Levi","Marianne","Matthias","Mara","Moritz","Mina","Meteo","Magdalena","Mats","Miriam","Matthis","Marianne","Mattes","Martje","Milo","Maeve","Mika","Mae","Maxim","Mädchen","Jungen","Nadja","Marlon","Nadine","Mark","Nele","Matti","Nora","Martin","Nina","Morris","Nada","Miran","Nadeshda","Miro","Nancy","Niklas","Nova","Nika","Nika","Niko","Nike","Nabil","Oda","Noel","Odilie","Nils","Okka","Nick","Olea","Neo","Odett","Nadeem","Olivia","Namo","Odilia","Nepomuk","Oana","Oscar","Pia","Ole","Paula","Oliver","Phlomena","Olivier","Paloma","Onur","Paris","Owen","Paola","Obbo","Poppy","Idil","Panja","Otto","Pardis","Oswald","Quirine","Paul","Quinta","Phil","Qara","Patrick","Ria","Paavo","Rita","Pamir","Raina","Pascal","Rabea","Peter","Radost","Quinn","Rabi","Quazim","Ronina","Kasimir","Rae","René","Radia","Riko","Svea","Robin","Smila","Raphael","Sofia","Rudi","Sonja","Remigius","Sophie","Richard","Stella","Radi","Sarah","Rainer","Silvie","Rasmus","Silke","Ruben","Sila","Samuel","Siri","Stefan","Sarah","Sascha","Saara","Serkan","Svenja","Marco","Sabine","Manuel","Sandra","Tom","Tiffanie","Tim","Thea","Theo","Tilda","Theodor","Tardis","Thilo","Tamina","Till","Tamy","Timo","Trudi","Tino","Tea","Tiny","Tima","Taylor","Tabia","Titus","Tassja","Tristan","Tilla","Tizian","Tabita","Todd","Tahua","Thomas","Uli","Taavi","Ulrike","Tillmann","Ute","Uwe","Uda","Udo","Ulla","Ugor","Ulrika","Ulrich","Ulva","Uli","Ulvi","Ulas","Uma","Ulf","Violeta","Volker","Victoria","Vinzent","Vanessa","Valentin","Valentine","Vitus","Valeska","Volker","Wandy","Valentin","Waris","Vidu","Walli","Valerio","Waltraud","Wilhelm","Wanda","William","Xenia","Will","Xani","Walter","Xanthe","Wanja","Yvonne","Wadi","Yu","Walid","Yla","Xaver","Zoe","Yannis","Zilla","Yannik","Zuri","Yoshi","Zamira","Yunus"];document.querySelector("kol-input-text.vorname")._list=NAMEN;
|
|
1
|
+
const FORMULAR_FORM=LeanUpForm.FormFactory.createForm("anschrift",{anschrift:{anrede:{ansprache:"Frau",vorname:"Elke",nachname:"Mustermann"},adresse:{strasse:"Musterstraße",hausnummer:"1a",ort:"Musterstadt",plz:"54321"}},email:"",text:"",datum:"2000-12-24",password:"Passwort",betrag:45,status:0,agb:null,datenschutz:null});console.log(FORMULAR_FORM);const ANSCHRIFT_FORM=FORMULAR_FORM.getControl("anschrift"),ANREDE_FORM=ANSCHRIFT_FORM.getControl("anrede"),ANREDE_ANSPRACHE_INPUT=ANREDE_FORM.getControl("ansprache"),ANREDE_VORNAME_INPUT=ANREDE_FORM.getControl("vorname"),ANREDE_NACHNAME_INPUT=ANREDE_FORM.getControl("nachname");ANREDE_ANSPRACHE_INPUT.label="Anrede",ANREDE_ANSPRACHE_INPUT.mandatory=!0,ANREDE_VORNAME_INPUT.label="Vorname",ANREDE_VORNAME_INPUT.mandatory=!0,ANREDE_VORNAME_INPUT.info="Bitte geben Sie einen schönen Vorname ein.",ANREDE_NACHNAME_INPUT.label="Nachname",ANREDE_VORNAME_INPUT.changeListeners.add(((...a)=>{console.log(...a)}));class DemoFehler extends LeanUpForm.AbstractValidator{constructor(){super("Test")}isValid(a){return!("string"==typeof a&&a.length>5||"boolean"==typeof a&&!1===a)}}class DemoFormatter extends LeanUpForm.AbstractFormatter{format(a){return a.toLocaleUpperCase()}parse(a){return a}}class Demo4SignSepFormatter extends LeanUpForm.AbstractFormatter{format(a){const e=a.match(/(.{1,4})/g);return Array.isArray(e)?e.join(" "):a}parse(a){return a.replace(/ +/g,"")}}class DemoMaxLength extends LeanUpForm.AbstractFormatter{format(a){return a}parse(a){return a.substring(0,6)}}const VALIDATION_HANDLER=new LeanUpForm.ValidationHandler;VALIDATION_HANDLER.validators.add(new DemoFehler),ANREDE_VORNAME_INPUT.setValidationHandler(VALIDATION_HANDLER),ANREDE_NACHNAME_INPUT.setValidationHandler(VALIDATION_HANDLER);const FORMAT_HANDLER=new LeanUpForm.FormatHandler;FORMAT_HANDLER.formatters.add([new DemoFormatter,new Demo4SignSepFormatter,new DemoMaxLength]),ANREDE_VORNAME_INPUT.setFormatHandler(FORMAT_HANDLER),document.querySelector("#kol-input-text")._control=ANREDE_VORNAME_INPUT;const ADRESSE_FORM=ANSCHRIFT_FORM.getControl("adresse"),ADRESSE_STRASSE_INPUT=ADRESSE_FORM.getControl("strasse"),ADRESSE_HAUSNUMMER_INPUT=ADRESSE_FORM.getControl("hausnummer"),ADRESSE_PLZ_INPUT=ADRESSE_FORM.getControl("plz"),ADRESSE_ORT_INPUT=ADRESSE_FORM.getControl("ort");ADRESSE_STRASSE_INPUT.label="Straße",ADRESSE_HAUSNUMMER_INPUT.label="Hausnummer",ADRESSE_PLZ_INPUT.label="Postleitzahl",ADRESSE_ORT_INPUT.label="Ort";const STATUS_INPUT=FORMULAR_FORM.getControl("status"),EMAIL_INPUT=FORMULAR_FORM.getControl("email"),TEXT_INPUT=FORMULAR_FORM.getControl("text"),BETRAG_INPUT=FORMULAR_FORM.getControl("betrag"),AGB_INPUT=FORMULAR_FORM.getControl("agb"),DATENSCHUTZ_INPUT=FORMULAR_FORM.getControl("datenschutz");STATUS_INPUT.label="Status",EMAIL_INPUT.label="E-Mail-Adresse",EMAIL_INPUT.info="Bitte geben Sie hier eine E-Mail-Adresse ein.",TEXT_INPUT.label="Text",TEXT_INPUT.mandatory=!0,TEXT_INPUT.setValidationHandler(VALIDATION_HANDLER),BETRAG_INPUT.label="Betrag",BETRAG_INPUT.mandatory=!0,BETRAG_INPUT.setValidationHandler(VALIDATION_HANDLER),AGB_INPUT.label="Ich akzeptiere die Allgemeinen Geschäftsbedingungen.",AGB_INPUT.mandatory=!0,AGB_INPUT.setValidationHandler(VALIDATION_HANDLER),DATENSCHUTZ_INPUT.label="Ich akzeptiere die Datenschutzerklärung.";const PASSWORD_INPUT=FORMULAR_FORM.getControl("password"),DATUM_INPUT=FORMULAR_FORM.getControl("datum");function domReady(){document.querySelector("#anrede-adapter")._control=ANREDE_ANSPRACHE_INPUT;const a=[{label:"Herr",value:"Herr"},{label:"Frau",value:"Frau"}];document.querySelectorAll("kol-input-radido").forEach((e=>{e._list=a,e._on={onChange:console.log}})),document.querySelector("kol-form").addEventListener("submit",(a=>{a.stopPropagation(),console.log(a,ANREDE_FORM.getData())}));document.querySelectorAll(".datenschutz-checkbox").forEach((a=>{a._control=AGB_INPUT})),document.querySelector("#new-input-checkbox")._control=AGB_INPUT,document.querySelector("#new-input-checkbox-leanup")._control=AGB_INPUT,document.querySelectorAll("kol-input-radio").forEach((e=>{e._list=a})),document.querySelector("#kol-input-text")._control=ANREDE_VORNAME_INPUT,document.querySelector("kol-input-text.vorname")._list=NAMEN,document.querySelector("#new-input-email")._control=EMAIL_INPUT,document.querySelector("#new-input-color")._control=new LeanUpForm.InputControl("color",{label:"Farbe",value:"#ff0000"}),document.querySelector("#new-input-file")._control=new LeanUpForm.InputControl("file",{label:"Datei(en) hochladen"}),document.querySelector("#new-input-range")._control=BETRAG_INPUT,document.querySelector("#new-textarea")._control=TEXT_INPUT;const e=setInterval((()=>{TEXT_INPUT.value=`${TEXT_INPUT.value}A`,document.querySelector('kol-textarea[_hide-label=""]')._value=TEXT_INPUT.value}),1e3),n=setTimeout((()=>{clearInterval(e),clearTimeout(n)}),10);STATUS_INPUT.value="['c1','2']",document.querySelectorAll("kol-select").forEach((a=>{a._on={onChange:console.log}})),document.querySelectorAll("kol-select.list4value").forEach((a=>{a._list="[{'value':null,'label':'- keine Auswahl -'},{'label':'Optgroup 1','options':[{'value':'a1','label':'A1'},{'disabled':true,'value':'b1','label':'B1'},{'label':'Optgroup 2','options':[{'value':'a2','label':'A2'},{'value':'b2','label':'B2'}]},{'value':'c1','label':'C1'}]},{'value':'1','label':'Gute Laune'},{'value':'2','label':'Geht so'},{'value':'3','label':'Schlechte Laune'},{'value':'4','label':'ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen'}]"})),document.querySelectorAll("kol-select.value4list").forEach((a=>{a._value=STATUS_INPUT.value})),setTimeout((()=>{document.querySelectorAll("kol-select.value4list").forEach((a=>{a._list="[{'value':null,'label':'- keine Auswahl -'},{'label':'Optgroup 1','options':[{'value':'a1','label':'A1'},{'disabled':true,'value':'b1','label':'B1'},{'label':'Optgroup 2','options':[{'value':'a2','label':'A2'},{'value':'b2','label':'B2'}]},{'value':'c1','label':'C1'}]},{'value':'1','label':'Gute Laune'},{'value':'2','label':'Geht so'},{'value':'3','label':'Schlechte Laune'},{'value':'4','label':'ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen'}]"})),document.querySelectorAll(".select-adapter").forEach((a=>{a._control=STATUS_INPUT})),document.querySelectorAll("kol-select.list4value").forEach((a=>{a._value=STATUS_INPUT.value}))}),5e3),document.querySelector("#new-input-date")._control=DATUM_INPUT,document.querySelector("#filter-table")._data=DATA,document.querySelector("#filter-input")._on={onChange:a=>{console.log(a.target.value),document.querySelector("#filter-table")._data=DATA.filter((e=>{const n=new RegExp(a.target.value,"i");return n.test(e.montag)||n.test(e.dienstag)||n.test(e.mittwoch)||n.test(e.donnerstag)||n.test(e.freitag)}))}};var t=document.querySelector("#fix-select-multi");t instanceof HTMLElement&&(t._list=[{label:"Baum",value:Date.now()},{label:"Baum",value:Date.now()}],t._on={onChange:(...a)=>{console.log("onChange",a),setTimeout((()=>{t._list=[{label:"Baum",value:Date.now()}].concat(t._list),setTimeout((()=>{console.log(t._value)}),100)}),100)}})}PASSWORD_INPUT.label="Passwort",DATUM_INPUT.label="Datum",ANREDE_ANSPRACHE_INPUT.readonly=!0,ANREDE_ANSPRACHE_INPUT.changeListeners.add((a=>{ANREDE_VORNAME_INPUT.disabled=!ANREDE_VORNAME_INPUT.disabled,ANREDE_NACHNAME_INPUT.readonly=!ANREDE_NACHNAME_INPUT.readonly,AGB_INPUT.readonly=!AGB_INPUT.readonly,DATENSCHUTZ_INPUT.disabled=!DATENSCHUTZ_INPUT.disabled})),ANREDE_VORNAME_INPUT.changeListeners.add((()=>{})),ANREDE_NACHNAME_INPUT.changeListeners.add((()=>{document.querySelector("#nachname").setAttribute("_readonly",ANREDE_NACHNAME_INPUT.readonly)})),document.onreadystatechange=function(){"complete"==document.readyState&&setTimeout(domReady,1e3)};const DATA=[{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Alex",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Helena",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Marcus"},{montag:"Fabian",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"},{montag:"Hong",dienstag:"Marie",mittwoch:"Kevin",donnerstag:"Maya",freitag:"Ben"}],NAMEN=["Lucy","Lukas","Ella","Konstantin","Amy","Ben","Emely","Jonas","Finja","Elias","Amelie","Niklas","Luise","David","Frieda","Oskar","Katharina","Philipp","Romy","Leon","Juna","Noah","Theresa","Luis","Eva","Paul","Julia","Finn","Anna","Felix","Carla","Julian","Paulina","Maximilian","Elisabeth","Henry","Rosa","Tim","Mia","Karl","Maya","Friedrich","Selma","Peter","Edda","Quirin","Flora","Liam","Berenike","Linus","Simone","Quentin","Elena","Paul","Meike","Johannes","Susanne","Alexander","Annika","Anton","Augusta","Aras","Alba","Asis","Wilma","Adrian","Annegret","Arthur","Aglaia","Adam","Aaliyah","Arian","Annabelle","Amos","Alma","Arik","Alicia","Ake","Anette","Altfried","Astrid","Ari","Anisha","Andreas","Antke","Allessandro","Abigail","Achim","Aideen","Ben","Aini","Bela","Aida","Baldur","Aamenah","Benedikt","Ariane","Beat","Adriana","Bernd","Alexandra","Bertram","Ava","Blue","Arielle","Badi","Allissa","Batiste","Aamu","Bastian","Arzu","Caleb","Anouk","Caspar","Andrea","Calvin","Bianca","Cadmus","Blanka","Christoph","Benita","Cedrik","Bettina","Camern","Bamika","Carsten","Bente","Cainan","Barbara","Cem","Berit","Carl","Bentje","Cyranus","Birte","Curt","Brigitte","Daniel","Christiane","Dominik","Charlotte","Darius","Catherina","Dario","Caroline","Dag","Caren","Diminic","Caecilia","Damian","Celine","Diego","Coco","Dieter","Chaya","Demian","Dalia","Dewis","Deenah","Dirk","Daphne","Donald","Delia","Enzo","Dari","Emil","Doerte","Erik","Djamila","Edwin","Dominique","Eliah","Doerte","Ethan","Dorothee","Erwin","Emira","Eliot","Emily","Enes","Elif","Emilio","Ellen","Ebbo","Enna","Eberhard","Ebba","Edgar","Eleni","Fabrizius","Freya","Finn","Fiona","Fabian","Franziska","Fabio","Luzia","Finjas","Fabienne","Franz","Mädchen","Jungen","Fiona","Falko","Felina","Fatih","Felicitas","Fynn","Fabia","Flavio","Fabiola","Fady","Fabrizia","Fritz","Filomae","Falko","Floris","Gabriel","Fae","Gustav","Fanny","Guiseppe","Fritzi","Günter","Greta","Gerhard","Gabrielle","Georg","Grit","Gel","Gwen","Gerald","Gabi","Geoffrey","Gila","Gismund","Giorgina","Giulio","Gisele","Godo","Heike","Henri","Hanna","Hannes","Helena","Henry","Haima","Henrik","Heike","Hendrik","Helen","Heiko","Isabell","Haku","Ida","Hanno","Ilona","Hugo","Ingrid","Henryk","Iris","Hardy","Ira","Hagar","Iara","Hafiz","Ivette","Haile","Irma","Hakan","Jardis","Hasso","Juni","Harry","Juna","Hauke","Josephine","Harun","Jella","Hayo","Jill","Idil","Jennifer","Ian","Jakobine","Izzy","Jessika","Ibrahim","Julie","Igor","Jasmin","Jack","Joana","Jules","Jaqueline","Julian","Jonna","Jan","Jean","Jakob","Janis","Jaap","Jodi","Jonathan","Jen","Jannik","Justyna","Jona","Jutta","Jannis","Kathleen","Joel","Kayra","Jonte","Klara","Jarin","Kiara","Jörn","Kathrin","Jari","Catrin","Jannik","Kiki","Jukka","Judith","Samo","Celia","Jaakov","Kaaria","Jeremy","Kerstin","Jarne","Kim","Kilian","Kader","Kai","Kaisa","Kylan","Liv","Kristian","Livia","Kasper","Louisa","Kadmos","Lucy","Klaus","Lina","Kaarle","Lena","Kevin","Leonie","Kadir","Lea","Konrad","Leni","Lukas","Lotta","Leon","Laura","Leopold","Lara","Luca","Lia","Linas","Lisa","Roland","Luna","Leo","Linda","Lennard","Laureen","Luke","Liv","Lenny","Liz","Lasse","Mona","Lion","Mareen","Luca","Mathilda","Lutz","Marlene","Levi","Marianne","Matthias","Mara","Moritz","Mina","Meteo","Magdalena","Mats","Miriam","Matthis","Marianne","Mattes","Martje","Milo","Maeve","Mika","Mae","Maxim","Mädchen","Jungen","Nadja","Marlon","Nadine","Mark","Nele","Matti","Nora","Martin","Nina","Morris","Nada","Miran","Nadeshda","Miro","Nancy","Niklas","Nova","Nika","Nika","Niko","Nike","Nabil","Oda","Noel","Odilie","Nils","Okka","Nick","Olea","Neo","Odett","Nadeem","Olivia","Namo","Odilia","Nepomuk","Oana","Oscar","Pia","Ole","Paula","Oliver","Phlomena","Olivier","Paloma","Onur","Paris","Owen","Paola","Obbo","Poppy","Idil","Panja","Otto","Pardis","Oswald","Quirine","Paul","Quinta","Phil","Qara","Patrick","Ria","Paavo","Rita","Pamir","Raina","Pascal","Rabea","Peter","Radost","Quinn","Rabi","Quazim","Ronina","Kasimir","Rae","René","Radia","Riko","Svea","Robin","Smila","Raphael","Sofia","Rudi","Sonja","Remigius","Sophie","Richard","Stella","Radi","Sarah","Rainer","Silvie","Rasmus","Silke","Ruben","Sila","Samuel","Siri","Stefan","Sarah","Sascha","Saara","Serkan","Svenja","Marco","Sabine","Manuel","Sandra","Tom","Tiffanie","Tim","Thea","Theo","Tilda","Theodor","Tardis","Thilo","Tamina","Till","Tamy","Timo","Trudi","Tino","Tea","Tiny","Tima","Taylor","Tabia","Titus","Tassja","Tristan","Tilla","Tizian","Tabita","Todd","Tahua","Thomas","Uli","Taavi","Ulrike","Tillmann","Ute","Uwe","Uda","Udo","Ulla","Ugor","Ulrika","Ulrich","Ulva","Uli","Ulvi","Ulas","Uma","Ulf","Violeta","Volker","Victoria","Vinzent","Vanessa","Valentin","Valentine","Vitus","Valeska","Volker","Wandy","Valentin","Waris","Vidu","Walli","Valerio","Waltraud","Wilhelm","Wanda","William","Xenia","Will","Xani","Walter","Xanthe","Wanja","Yvonne","Wadi","Yu","Walid","Yla","Xaver","Zoe","Yannis","Zilla","Yannik","Zuri","Yoshi","Zamira","Yunus"];document.querySelector("kol-input-text.vorname")._list=NAMEN;
|