Struktur
<lk-cloner>
(slot name="before" /)
[
<slot/>
]
(slot name="after" /)
<button>
<slot/>
</button>
(div)
(slot/)
(/div)
</lk-cloner>
Attributter
Merknader: må*, bør, husk, ekstra.
| Attributt | Tillatte verdier | Default | Beskrivelse |
|---|---|---|---|
| button-text | string | "" | |
| iterate-attributes | csv:string | "" | |
| group-name | string | "" | Brukes ifm. mellomlagring |
| values | string | "" | Brukes ifm. mellomlagring |
| first-hidden | boolean | "" | |
| button-class | string | "" | |
| background-color | string | "" | |
| secondary | boolean | "" | |
| clone-processor | callback(newClone):function | () => {} | Kalles når en ny klone legges til |
| level | string | "" | |
| iterate-extra-attributes | csv:string | "" | |
| external-dependant-guids | csv:string | "" | Brukes for å kalle adjustDependant() fra eksterne avhengigheter som styrer felter inni lk-cloner |
| cloneLimit | number | "" | Set en begrensning for hvor mange kopier kloneren kan ha av gangen |
Spalter
Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com
| Slot= | Beskrivelse |
|---|---|
| * | Elementer uten slot= attributter blir brukt som mal for hver klone |
| before | Før alle kloner |
| after | Etter alle kloner |
| help-text | Plasseres inni <button> |
Metoder
Merk at alle metoder er asynkrone. Ref. Stenciljs.com
| Metode | Parameter | Retur | Beskrivelse |
|---|---|---|---|
| validate checkValidity |
() | null valid:boolean |
|
| lastClone | () | HTMLElement | |
| nthClone | (nth:number) | HTMLElement | Returnerer den n-te klonen |
| setClickEvent | (callback:function) | null | |
| addClone | () | lastClone:HTMLElement |
Eksempler
Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.
Eksempel 1
Alt som plasseres inni denne slot'en kommer før legg-til-gruppen
Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen
Eksempel 2: med max 3 kopier
Alt som plasseres inni denne slot'en kommer før legg-til-gruppen
Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen
Eksempel 3: med egen definert hjelp text
Alt som plasseres inni denne slot'en kommer før legg-til-gruppen
Dette er en test beskjed for hvorfor du bare kan ha 2 kopier
Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen
<h2>Eksempel 1</h2>
<lk-cloner button-text="Legg til person">
<div slot="before" class="span-whole">
<p>Alt som plasseres inni denne slot'en kommer før legg-til-gruppen</p>
</div>
<lk-input-block class="span-half"
guid="person0.Navn"
input-name="person[0].Navn"
preset="fullname"
required>
</lk-input-block>
<lk-input-block class="span-half"
guid="person0.Pnr"
input-name="person[0].Pnr"
preset="personalid"
required>
</lk-input-block>
<lk-radio-group class="span-whole"
guid="person0.Bonanza"
group-name="person[0].Bonanza"
group-class=""
group-label="Legg til klone-bonanza?"
radio-labels='["Ja","Nei"]'
values='["true","false"]'
vertical-align="false"
dependant-id="bonanza0"
show-dependant-if-value="true"
required
error-message="Dette feltet er obligatorisk">
</lk-radio-group>
<lk-cloner id="bonanza0"
class="span-whole no-display"
secondary
button-text="Legg til bedrift"
iterate-extra-attributes="rename">
<lk-input-block class="span-whole"
guid="person0.Organisasjon0.Orgnr"
input-name="person[0].Organisasjon[0].Orgnr"
preset="organisationid"
required
data-auto-required >
</lk-input-block>
<lk-file-upload guid="person0.Organisasjon0.Firmaattest"
input-name="person[0].Organisasjon[0].Firmaattest"
rename="person0_organisasjon0_firmaattest"
class="span-whole"
small
preset-accept="documents,images"
required
data-auto-required>
</lk-file-upload>
<lk-checkbox guid="person0.Organisasjon0.EttersendeFirmaattest"
input-name="person[0].Organisasjon[0].EttersendeFirmaattest"
class="span-whole"
label="Jeg ønsker å ettersende firmaattest"
value="true"
dependant-guid="person0.Organisasjon0.Firmaattest"
hide-dependant-if-checked>
</lk-checkbox>
<lk-cloner id="bonanza0inception0"
class="span-whole"
first-hidden
button-text="Legg til bransje">
<lk-input-block class="span-whole"
guid="person0.Organisasjon0.Bransjer0"
input-name="person[0].Organisasjon[0].Bransjer[0].Bransje"
label="Bransje"
placeholder="Bransje"
required>
</lk-input-block>
</lk-cloner>
</lk-cloner>
<div slot="after" class="span-whole">
<p>Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen</p>
</div>
</lk-cloner>
<br><br><br>
<br><br><br>
<h2>Eksempel 2: med max 3 kopier</h2>
<lk-cloner button-text="Legg til person" clone-limit="3">
<div slot="before" class="span-whole">
<p>Alt som plasseres inni denne slot'en kommer før legg-til-gruppen</p>
</div>
<lk-input-block class="span-whole"
guid="_person0.Navn"
input-name="_person[0].Navn"
preset="fullname"
required>
</lk-input-block>
<lk-radio-group class="span-whole"
guid="_person0.Bonanza"
group-name="_person[0].Bonanza"
group-class=""
group-label="Legg til klone-bonanza?"
radio-labels='["Ja","Nei"]'
values='["true","false"]'
vertical-align="false"
dependant-id="_bonanza0"
show-dependant-if-value="true"
required
error-message="Dette feltet er obligatorisk">
</lk-radio-group>
<div slot="after" class="span-whole">
<p>Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen</p>
</div>
</lk-cloner>
<br><br><br>
<br><br><br>
<h2>Eksempel 3: med egen definert hjelp text</h2>
<lk-cloner button-text="Legg til person" clone-limit="2">
<div slot="before" class="span-whole">
<p>Alt som plasseres inni denne slot'en kommer før legg-til-gruppen</p>
</div>
<lk-input-block class="span-whole"
guid="_person0.Navn"
input-name="_person[0].Navn"
preset="fullname"
iterateAttributes=""
required>
</lk-input-block>
<p slot="help-text">Dette er en test beskjed for hvorfor du bare kan ha 2 kopier</p>
<div slot="after" class="span-whole">
<p>Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen</p>
</div>
</lk-cloner>