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.

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

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

    <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"
></lk-input-block>

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

Hvor finner jeg denne koden?