altinn-designsystem
Version:
Altinn Design system based on Pattern Lab.
169 lines (113 loc) • 6.79 kB
HTML
<!-- START: 02-organismer-70-Modal-innhold-_99-klientdelegering-pa-fil -->
<div class="modal-body a-modal-body">
<div class="py-2">
<form data-toggle="validator">
<div class="mb-3">
</div>
<div class="mb-1">
</div>
<div class="mb-3">
<!-- START: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
<button type="button" class="a-btn a-btn-action">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-download " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
<span>Last ned fil</span>
</button>
<!-- END: 00-atomer-04-handlingsknapper-17-handlingsknapp -->
</div>
<div class="mb-1">
</div>
<!-- START: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst JS doc: toggleFilter.js -->
<a data-toggle="collapse" href="#" data-target="#file-delegation-ID" aria-expanded="true" aria-controls="file-delegation-ID" class="a-collapse-title a-collapse-title--flexstart a-fontBold no-decoration collapsed">
<span class="a-dropdownArrow"></span>
<span class="primary-collapse-text">
Denne teksten kan man trykke på for å se utvidet informasjon om et tema
</span>
</a>
<!-- END: 00-atomer-05-Ekspansjonsknapper-26-ekspanderbar-tekst -->
<div class="mt-1 mb-4">
<div id="file-delegation-ID" class="a-collapseContent collapse" aria-expanded="false" role="group">
<img src="../../images/klientdelegeringfil.jpg" class="mb-2" alt="Illustrasjon av Excel-fil for filopplastning." />
<!-- START: 00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul -->
<!-- START: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<ol class="a-circle-list a-circle-list-yellow">
<li><b>Første punkt i listen</b>(med ekstra informasjon) </li>
<li><b>Andre punkt i listen har</b>en særdeles lang tekst som går over flere linjer med lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit purus eu vehicula bibendum. Duis luctus magna ac dui convallis iaculis. Donec aliquam
dolor quis convallis finibus. Vivamus commodo semper volutpat. Nullam iaculis, nisl in elementum viverra, ligula leo tristique mauris, ut laoreet justo massa ut nisi. Duis lacinia nulla justo, vitae vehicula arcu suscipit sed. Vivamus ac
odio quis turpis rutrum lacinia a eu dui. Nullam imperdiet, nibh sit amet venenatis auctor, libero massa placerat ipsum, fermentum dignissim nibh mauris sit amet ex. </li>
<li><b>Tredje punkt</b>har kun litt tekst. </li>
<li><b>Fjerde punkt i listen har lenke!</b>
<!-- START: 00-atomer-02-lenker-00-link -->
<a href="http://www.skatteetaten.no" class=" ">
Finn ut mer
</a>
<!-- END: 00-atomer-02-lenker-00-link -->
</li>
</ol>
<!-- END: 00-atomer-08-lister-06-liste-nummerert-sirkel -->
<!-- END: 00-atomer-08-lister-07-♺-liste-nummerert-sirkel-gul -->
</div>
</div>
<div class="mb-1">
</div>
<div class="mb-4">
<!-- START: 00-atomer-01-forms-_71-fileupload-klientdelegering JS doc: fileInputHandler.js -->
<label class="a-btn a-btn-action a-custom-fileupload mb-0">
<input required class="a-js-fileInputChangeHandler sr-only" type="file" id="customFileuploadId">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-upload " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
Last opp fil
</label>
<div style="display: none" class="a-js-fileListContainer">
<!-- START: 00-atomer-08-lister-_20-liste-opplasting JS doc: fileInputHandler.js -->
<ul class="a-item-list-icon a-list a-list-borderTop">
<li class="a-dotted a-selectable" tabindex="0" role="button" onclick="onFileListDeleteClick(this)" aria-label="Fjern fil:">
<div class="row">
<div class="col">
<span class="a-js-listItemText">
klientrolle_delegeringer_30_05_16.csv
</span>
</div>
<div class="col-auto text-right">
<!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-circle-exit "></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</div>
</div>
</li>
</ul>
<!-- END: 00-atomer-08-lister-_20-liste-opplasting -->
</div>
<!-- END: 00-atomer-01-forms-_71-fileupload-klientdelegering -->
</div>
<div class="mb-1">
</div>
<div class="row">
<div class="col-12 col-md-8 col-xl-6 mb-2">
<!-- START: 00-atomer-01-forms-10-tekst-input JS doc: handleFocus.js, searchWithMultipleSelectInAutoComplete.js brukes via klassen a-js-autocomplete på form-control-class gir autocomplete med mulighet for å velge flere elementer fra resultatlista. -->
<div class="form-group a-form-group ">
<label class="a-form-label sr-only " for="text-input-klientdelegering-fil">Epost</label>
<div class="a-form-group-items input-group ">
<span class="input-group-prepend d-none d-md-block"><!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
<i class="ai ai-closedmessage " ></i>
<!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
</span>
<input class="form-control a-hasIcon
" type="email" placeholder="f.eks post@karinordmann.no" name="input-field" data-val="true" id="text-input-klientdelegering-fil" required data-val-regex="Feil epost verdier" data-val-regex-pattern="(('[^']+')|(([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+(.([a-zA-Z0-9!#$%&'*+-=?^_`{|}~])+)*))@((((([a-zA-Z0-9æøåÆØÅ]([a-zA-Z0-9-æøåÆØÅ]{0,61})[a-zA-Z0-9æøåÆØÅ].)|[a-zA-Z0-9æøåÆØÅ].){1,9})([a-zA-Z]{2,14}))|((d{1,3}).(d{1,3}).(d{1,3}).(d{1,3})))">
</div>
<div class="a-message a-message-error" data-valmsg-for="input-field" data-valmsg-replace="true"></div>
</div>
<!-- END: 00-atomer-01-forms-10-tekst-input -->
</div>
</div>
<!-- START: 00-atomer-03-knapper-10-knapp -->
<button type="submit" onclick="location.href='/patterns/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter/04-sider-portal-60-profil-roller-rettigheter-01-profil-roller-rettigheter.html'" class="a-btn a-btn-success mb-0 a-js-enableWhenValid">
Ferdig
</button>
<!-- END: 00-atomer-03-knapper-10-knapp -->
</form>
</div>
</div>
<!-- END: 02-organismer-70-Modal-innhold-_99-klientdelegering-pa-fil -->