Input block Input elementer primært for dialogtjenesetene.

Struktur

<lk-input-block>
  (label)
    (lk-help-text)
      (slot name="help-text" /)
    (/lk-help-text)
  (/label)

  <slot/>

  <input/>

  (div)
    (div)
      (strong/)
      (input/)
    (/div)
  (/div)

  (button)
    (span/)
  (/button)
  
  (p/)
</lk-input-block>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
guid* string "" <input> sin id=, <label> sin for= og prefiks for <p> sin id=
input-name* string "" <input> sin name=
preset preset:string "" Se oversikt lenger ned
label string "" <label> sin tekst=
placeholder string "" <input> sin placeholder=
required-message string ""
error-message string ""
required boolean false <input> sin required=
input-type text, tel, email, number;
date, time, password, search, url		 "text" <input> sin type=
input-mode string "" <input> sin inputmode=
pattern string/RegExp "" <input> sin pattern=
squish boolean "" Fjerner ekstra mellomrom i <input> sin value=
min-length
max-length		 number "" <input> sin min-length=/max-length=
min
max		 number "" <input> sin min=/max=
step number "" <input> sin step=
disabled boolean false <input> sin disabled=
readonly boolean false <input> sin readonly=
loading boolean false Legger til en bakgrunnsanimasjon (legger til "loading" i <input> sin class=), og passende aria-tags
label-class string "" <label> sin class=
value string "" <input> sin initielle value=
list string "" <input> sin list=
autocomplete-list JSON-array:string null
has-autocomplete boolean false
min-autocomplete number ""
autocomplete string "" <input> sin autocomplete=
fetch-url string null
fetch-method string "GET"
search-url string null
search-method string "GET"
search-param string "search"
search-button-text string "Søk"
search-view-param string "search"
search-spinner string null
timout-time number 500
result-block string null
initial-valid boolean true Brukes internt av komponenten
reset boolean false Brukes internt av komponenten

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
help-text Plasseres inni <label>

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
addValidator (validator:function) null
checkValidity () valid:boolean
validate () null
setFocus () null
getValue () value:string
getDataValue () hiddenValue:string
setValue (value:string) value:string
changeValidity (valid:boolean) null

Eventer

Ref. Stenciljs.com

Event Parameter Beskrivelse
autoCompleteClick ()

Presets

Automagiske attributter. 

<lk-filter item-selector="lk-input-block" placeholder="Søk etter presets">

    <lk-input-block
    guid="fullname"
    input-name="fullname"
    preset="fullname">
    </lk-input-block>

    <lk-input-block
    guid="street"
    input-name="street"
    preset="street">
    <!--
    preset="address"
    -->
    </lk-input-block>

    <lk-input-block
    guid="postcode"
    input-name="postcode"
    preset="postcode">
    <!--
    preset="postalcode"
    preset="zipcode"
    -->
    </lk-input-block>

    <lk-input-block
    guid="postarea"
    input-name="postarea"
    preset="postarea">
    <!--
    preset="postalarea"
    preset="ziparea"
    -->
    </lk-input-block>

    <lk-input-block
    guid="apartmentnumber"
    input-name="apartmentnumber"
    preset="apartmentnumber">
    <!--
    preset="apartmentunitnumber"
    preset="propertyunitnumber"
    preset="dwellingnumber"
    -->
    </lk-input-block>

    <lk-input-block
    guid="phone"
    input-name="phone"
    preset="phone">
    <!--
    preset="phonenumber"
    -->
    </lk-input-block>

    <lk-input-block
    guid="mob"
    input-name="mob"
    preset="mob">
    <!--
    preset="mobile"
    preset="mobilenumber"
    -->
    </lk-input-block>

    <lk-input-block
    guid="email"
    input-name="email"
    preset="email">
    <!--
    preset="emailaddress"
    -->
    </lk-input-block>

    <lk-input-block
    guid="pid"
    input-name="pid"
    preset="pid">
    <!--
    preset="personalid"
    -->
    </lk-input-block>

    <lk-input-block
    guid="orgid"
    input-name="orgid"
    preset="orgid">
    <!--
    preset="organisationid"
    -->
    </lk-input-block>

    <lk-input-block
    guid="account"
    input-name="account"
    preset="account">
    <!--
    preset="account"
    preset="bankaccount"
    -->
    </lk-input-block>

    <lk-input-block
    guid="clubname"
    input-name="clubname"
    preset="clubname">
    </lk-input-block>
</lk-filter>

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Help-text vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Help-text brukes.

PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.

 
<div class="grid">
    <lk-input-block
        guid="spm1"
        input-name="spm1"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-whole"
    ></lk-input-block>


    <lk-input-block
        guid="spm2"
        input-name="spm2"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-whole"
    >

        <div slot="help-text">
            <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
            <p>Det er ønskelig å bruke denne minst mulig:</p>
            <ul>
                <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
                <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
            </ul>
        </div>

    </lk-input-block>


    <lk-input-block
        guid="spm3"
        input-name="spm3"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-whole"
    >

        <p slot="help-text">PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.</p>

    </lk-input-block>

    <lk-input-block
        guid="pid"
        input-name="pid"
        preset="personalid"
        class="span-whole"
    ></lk-input-block>

    <lk-input-block
        guid="orgid"
        input-name="orgid"
        preset="organisationid"
        class="span-whole"
    ></lk-input-block>

    <lk-input-block
        guid="datefrom"
        input-name="datefrom"
        label="Dato"
        input-type="date"
        min="2022-06-23"
        max="today"
        class="span-whole"
    ></lk-input-block>

    <lk-input-block 
        class="span-third-fill-rest" 
        guid="organizationContactPerson" 
        input-type="text" 
        input-name="organization.contactPerson" 
        label="Kontaktperson for bedriften" 
        placeholder="Kontaktperson" 
        required-message="Du må oppgi kontaktperson for bedriften" 
        preset="fullname" 
        checkbox="test" 
        checkbox-input-name="person.OrganizationContactPerson" 
        checkbox-label="Jeg er kontaktperson" 
        checkbox-value="true" 
        data-auto-required="" 
        value="" 
        pattern="(\p{L}+\.*|\p{L}+-\p{L}+\.*)((\p{L}+\.*|\p{L}+-\p{L}+)\.*)+" 
        min-length="3" 
        max-length="50" 
        autocomplete="name" 
        data-controlled-by="[&quot;applicantType&quot;]" 
        required="">
    </lk-input-block>

    <form class="span-whole">
        <div class="grid">
            <div class="span-quarter span-third-on-laptop span-third-on-tablet">
                <lk-input-block guid="fromDate"
                    input-name="fromDate"
                    input-type="date"
                    label="Fra og med"
                    placeholder="Fra og med"
                    required-message="Du må velge fra dato."
                    error-message="Fra dato må være større enn dagens dato og mindre eller lik til dato."
                    pattern="[0-3]{1}[0-9]{1}\.[0-1]{1}[0-9]{1}\.20[1-2]{1}[0-9]{1}"
                    data-date="from"
                    min="2010-01-01" 
                    max="2099-12-01"
                    required>
                </lk-input-block>
            </div>

            <div class="span-quarter span-third-on-laptop span-third-on-tablet">
                <lk-input-block guid="toDate"
                    input-name="toDate"
                    input-type="date"
                    label="Til og med"
                    min="2010-01-01" 
                    max="2099-12-31"
                    placeholder="Til og med"
                    required-message="Du må velge til dato."
                    error-message="Til dato må være større enn dagens dato og større eller lik fra dato."
                    pattern="[0-3]{1}[0-9]{1}\.[0-1]{1}[0-9]{1}\.20[1-2]{1}[0-9]{1}"
                    data-date="to"
                    required>
                </lk-input-block>
            </div>
        </div>
    </form>
</div>

Utilities

.input-block--mini

.input-block--small

.input-block--base

Grid med utility

Span-half med utility

<h2 id="Utility">Utilities</h2>
<!-- Eksemplet vises som i dialog -->
<div class="container">
    <div class="form-container">
        <form>
            <h3>.input-block--mini</h3>
            <lk-input-block 
                guid="partnerabbrname"
                class="input-block--mini"
                input-name="Partner.AbbrName"
                preset="fullname"
                label="Fullt navn på kommende ektefelle"
                error-message="Du må oppgi fullt navn til din kommende ektefelle."
                required
                value="Ken Langaas"
                placeholder="F.eks. Navn Navnesen"
                autocomplete="name"
            ></lk-input-block>
            
            <h3>.input-block--small</h3>
            <lk-input-block 
                guid="partnerabbrname"
                class="input-block--small"
                input-name="Partner.AbbrName"
                preset="fullname"
                label="Fullt navn på kommende ektefelle"
                error-message="Du må oppgi fullt navn til din kommende ektefelle."
                required=""
                value="Ken Langaas"
                placeholder="F.eks. Navn Navnesen"
                autocomplete="name"
            ></lk-input-block>

            <h3>.input-block--base</h3>
            <lk-input-block 
                class="input-block--base"
                guid="partnerabbrname"
                input-name="Partner.AbbrName"
                preset="fullname"
                label="Fullt navn på kommende ektefelle"
                error-message="Du må oppgi fullt navn til din kommende ektefelle."
                required=""
                value="Ken Langaas"
                placeholder="F.eks. Navn Navnesen"
                autocomplete="name"
            ></lk-input-block>
            
            <h2>Grid med utility</h2>
            <h3>Span-half med utility</h3>
            <div class="grid">
                <lk-input-block 
                    class="span-half input-block--mini"
                    guid="partnerabbrname"
                    input-name="Partner.AbbrName"
                    preset="fullname"
                    label="Span-half og input-block--mini"
                    error-message="Du må oppgi fullt navn til din kommende ektefelle."
                    required=""
                    value="Span-half og input-block--mini"
                    placeholder="F.eks. Navn Navnesen"
                    autocomplete="name"
                ></lk-input-block>
                <lk-input-block 
                    class="span-half input-block--base"
                    guid="partnerabbrname"
                    input-name="Partner.AbbrName"
                    preset="fullname"
                    label="Span half og input-block--base"
                    error-message="Du må oppgi fullt navn til din kommende ektefelle."
                    required=""
                    value="Span half og input-block--base"
                    placeholder="F.eks. Navn Navnesen"
                    autocomplete="name"
                ></lk-input-block>
                <lk-input-block 
                    class="span-half input-block--small"
                    guid="partnerabbrname"
                    input-name="Partner.AbbrName"
                    preset="fullname"
                    label="Span half og input-block--small"
                    error-message="Du må oppgi fullt navn til din kommende ektefelle."
                    required=""
                    value="Span half og input-block--small"
                    placeholder="F.eks. Navn Navnesen"
                    autocomplete="name"
                ></lk-input-block>
                <lk-input-block 
                    class="span-half input-block--small"
                    guid="partnerabbrname"
                    input-name="Partner.AbbrName"
                    preset="fullname"
                    label="Span half og input-block--small"
                    error-message="Du må oppgi fullt navn til din kommende ektefelle."
                    required=""
                    value="Span half og input-block--basesmall"
                    placeholder="F.eks. Navn Navnesen"
                    autocomplete="name"
                ></lk-input-block>
            </div>
        </form>
    </div>
</div>

Hvor finner jeg denne koden?