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="["applicantType"]"
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>
<h2>Utilities <a id="Utility"></a></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>