Kloning av felter Legg til funksjon til skjemaer.

Struktur

<lk-cloner>

  (slot name="before" /)

  [
    <slot/>
  ]

  (slot name="after" /)

  <button>
    <span/>
  </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 ""

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

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.

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

<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>

Hvor finner jeg denne koden?