Designsystem - Kloning av felter

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>