<section class="panel theme--white
panel--compact ">
<div class="panel__inner">
<div class="row row--justify-around h-text-align-center-m">
<div class="col col--span-12 col--span-s-10 col--span-l-8">
<h2>Hitta dokument</h2>
<div class="preamble">
<p>
Här kan du söka bland 1000-tals dokument som hör till Swegons produkter.
Utgångna dokument hittar du i vårt arkiv. <a href="#">Klicka här</a> för att komma till arkivet.
Eller sök via ditt ordernummer genom att <a href="#">klicka här</a>.
</p>
</div>
<div class="search-field search-field--big">
<div class="search-field__field">
<input type="search" class="search-field__input" placeholder="Sök dokument" />
<button class="search-field__submit" type="submit"></button>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="panel theme--grey
panel--compact
panel--no-padding-top ">
<div class="panel__inner">
<div class="filters js-filters js-loader-overlay-holder" aria-controls="filter-documents-list">
<div class="row">
<div class="col h-margin-top-4 h-margin-bottom-1">
<div class="headline-5">Filtrera</div>
</div>
</div>
<div class="h-margin-bottom-2">
<div class="row h-margin-bottom-1 js-dropdowns-holder ">
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="categorySelect1" class="select__select js-filter" name="Select1" aria-controls="filter-documents-list" data-type="select" data-type-variant="select-with-relation">
<option class="select__option" value="" disabled selected>Please select category</option>
<option class="select__option" value="1">Option 1</option>
<option class="select__option" value="2">Option 2</option>
</select>
</div>
</div>
<div class="col col--span-12 col--span-xs-6 col--span-m-3">
<div class="form-item form-item--select ">
<select id="categorySelect2" class="select__select js-filter" name="Select2" aria-controls="filter-documents-list" data-type="select" data-type-variant="select-with-relation">
<option class="select__option" value="">Option 1</option>
<option class="select__option" value="2" selected>Option 2</option>
<option class="select__option" value="3">Option 3</option>
</select>
</div>
</div>
</div>
<div class="row row--justify-between h-margin-bottom-1">
<div class="col col--auto-width">
<div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
<div class="form-item">
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__content">
Produktblad lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut.
<div class="tooltip__arrow"></div>
</div>
</div>
<div class="checkbox__item ">
<label class="checkbox__label js-filter" for="Produktblad">
<input class="checkbox__input js-filter" type="checkbox" name="Produktblad" id="Produktblad" value="Produktblad" aria-controls="filter-documents-list" data-type="checkbox">
<span class="checkbox__title">Produktblad</span>
</label>
</div>
</div>
</div>
</div>
<div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
<div class="form-item">
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__content">
Manual lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut.
<div class="tooltip__arrow"></div>
</div>
</div>
<div class="checkbox__item ">
<label class="checkbox__label js-filter" for="Manual">
<input class="checkbox__input js-filter" type="checkbox" name="Manual" id="Manual" value="Manual" aria-controls="filter-documents-list" data-type="checkbox">
<span class="checkbox__title">Manual</span>
</label>
</div>
</div>
</div>
</div>
<div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
<div class="form-item">
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__content">
Broschyrer lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut.
<div class="tooltip__arrow"></div>
</div>
</div>
<div class="checkbox__item ">
<label class="checkbox__label js-filter" for="Broschyrer">
<input class="checkbox__input js-filter" type="checkbox" name="Broschyrer" id="Broschyrer" value="Broschyrer" aria-controls="filter-documents-list" data-type="checkbox">
<span class="checkbox__title">Broschyrer</span>
</label>
</div>
</div>
</div>
</div>
<div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
<div class="form-item">
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__content">
Kvalitetsdokument lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut.
<div class="tooltip__arrow"></div>
</div>
</div>
<div class="checkbox__item ">
<label class="checkbox__label js-filter" for="Kvalitetsdokument">
<input class="checkbox__input js-filter" type="checkbox" name="Kvalitetsdokument" id="Kvalitetsdokument" value="Kvalitetsdokument" aria-controls="filter-documents-list" data-type="checkbox">
<span class="checkbox__title">Kvalitetsdokument</span>
</label>
</div>
</div>
</div>
</div>
<div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
<div class="form-item">
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__content">
Ritning lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut.
<div class="tooltip__arrow"></div>
</div>
</div>
<div class="checkbox__item ">
<label class="checkbox__label js-filter" for="Ritning">
<input class="checkbox__input js-filter" type="checkbox" name="Ritning" id="Ritning" value="Ritning" aria-controls="filter-documents-list" data-type="checkbox">
<span class="checkbox__title">Ritning</span>
</label>
</div>
</div>
</div>
</div>
<div class="h-display-inline-block h-margin-right-3 h-margin-bottom-2">
<div class="form-item">
<div class="js-tooltip">
<div class="tooltip">
<div class="tooltip__content">
Övrigt lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut.
<div class="tooltip__arrow"></div>
</div>
</div>
<div class="checkbox__item ">
<label class="checkbox__label js-filter" for="Övrigt">
<input class="checkbox__input js-filter" type="checkbox" name="Övrigt" id="Övrigt" value="Övrigt" checked aria-controls="filter-documents-list" data-type="checkbox">
<span class="checkbox__title">Övrigt</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col col--auto-width">
<label for="Inkludera tillbehörsdokument" class="switch">
<input type="checkbox" class="switch__checkbox js-filter" value="includeAccessoryDocuments" aria-controls="filter-documents-list" data-type="switch" checked id="Inkludera tillbehörsdokument">
<div class="switch__control"></div>
<span class="switch__label">Inkludera tillbehörsdokument</span>
</label>
</div>
</div>
<div class="js-clear-filters-holder h-hidden-from-view row h-margin-top-1 h-margin-bottom-1 ">
<div class="col">
<a href="#" class="js-clear-filters">Clear filters</a>
</div>
</div>
</div>
<div class="h-margin-top-3">
<div class="row row--justify-between row--align-center">
<div class="col col--auto-width">
<p class="search-result-count">Visar 5 av 1000 träffar.</p>
</div>
<div class="col col--auto-width">
<div class="form-item form-item--select form-item--horizontal">
<label for="categorySelectSort" class="form-item__label">
Sortera:
</label>
<select id="categorySelectSort" class="select__select js-filter select__select--ghost" name="Sort" aria-controls="filter-documents-list" data-type="select">
<option class="select__option" value="" selected>Senaste</option>
<option class="select__option" value="a-z">A-Z</option>
<option class="select__option" value="z-a">Z-A</option>
</select>
</div>
</div>
</div>
</div>
<div class="
horizontal-scroller
horizontal-scroller--show-icon
" data-show-scroll-icon="true">
<div class="horizontal-scroller__scroller">
<table id="filter-documents" class="table table--inverted-zebra ">
<thead>
<tr>
<td>Dokument</td>
<td><a class="js-sortable-cell" href="#" id="article" aria-controls="filter-documents-list">Artikel</a></td>
<td><a class="js-sortable-cell" href="#" id="doctype" aria-controls="filter-documents-list">Dokumenttyp</a></td>
<td><a class="js-sortable-cell" href="#" id="date" aria-controls="filter-documents-list">Publiceringsdatum</a></td>
<td>Ladda ner</td>
</tr>
</thead>
<tbody id="filter-documents-list">
<tr data-extension="test" data-filename="pdf" data-document-category="Övrigt" class="js-document-tracking-row">
<td><a class="js-document-tracking-link" href="#">Anvisningar för isärtagning (pdf 618.54kB)</a></td>
<td>CASA Blues</td>
<td>Övrigt</td>
<td>2021-11-02</td>
<td><a href="/mocks/document.pdf" class="table__icon js-document-tracking-link" download><svg class="icon" focusable="false">
<use xlink:href="#icon-download"></use>
</svg></a></td>
</tr>
<tr data-extension="test 2" data-filename="pdf2" data-document-category="Övrigt2" class="js-document-tracking-row">
<td><a class="js-document-tracking-link" href="#">Anvisningar för montering, drift och underhåll (pdf 618.54kB)</a></td>
<td><a href="#">CASA Blues</a></td>
<td>Övrigt</td>
<td>2021-10-03</td>
<td><a href="/mocks/document.pdf" class="table__icon js-document-tracking-link" download><svg class="icon" focusable="false">
<use xlink:href="#icon-download"></use>
</svg></a></td>
</tr>
<tr data-extension="test 3" data-filename="pdf 3" data-document-category="Övrigt 3" class="js-document-tracking-row">
<td><a class="js-document-tracking-link" href="#">Anvisningar för montering, drift och underhåll, Epsilon Echos series (pdf 618.54kB)</a></td>
<td>CASA Blues</td>
<td>Övrigt</td>
<td>2021-10-04</td>
<td><a href="/mocks/document.pdf" class="table__icon js-document-tracking-link" download><svg class="icon" focusable="false">
<use xlink:href="#icon-download"></use>
</svg></a></td>
</tr>
<tr data-extension="test 4" data-filename="pdf 4" data-document-category="Övrigt 4" class="js-document-tracking-row">
<td><a class="js-document-tracking-link" href="#">Apparatlåda, All Year Comfort (COMPACT) (pdf 618.54kB)</a></td>
<td>CASA Blues</td>
<td>Övrigt</td>
<td>2021-10-04</td>
<td><a href="/mocks/document.pdf" class="table__icon js-document-tracking-link" download><svg class="icon" focusable="false">
<use xlink:href="#icon-download"></use>
</svg></a></td>
</tr>
<tr data-extension="test 5" data-filename="pdf 5" data-document-category="Övrigt 5" class="js-document-tracking-row">
<td><a href="#">Bedömning, Sunda Hus (pdf 618.54kB)</a></td>
<td>CASA Blues</td>
<td>Övrigt</td>
<td>2021-10-02</td>
<td><a href="/mocks/document.pdf" class="table__icon" download><svg class="icon" focusable="false">
<use xlink:href="#icon-download"></use>
</svg></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/template" id="document-data-tmpl">
<% forEach(results, function(result) { %>
<tr
data-extension="<%= result.extension %>"
data-filename="<%= result.fileName %>"
data-document-category="<%= result.type %>"
class="js-document-tracking-row"
>
<td>
<a class="js-document-tracking-link" href="<%= result.url %>" target="_blank">
<%= result.title %>
</a>
</td>
<td><%= result.article %></td>
<td><%= result.type %></td>
<td><%= result.date %></td>
<td>
<a
href="<%= result.fileUrl %>"
download
class="js-document-tracking-link"
>
Ladda ner
</a>
</td>
</tr>
<% }); %>
</script>
<div class="h-text-align-center">
<p class="search-result-count"></p>
<button class="button js-load-more " href="/mocks/api/documents.json" aria-controls="filter-documents-list" data-template-id="document-data-tmpl">
<span class="button__label">Ladda fler</span>
</button>
</div>
</div>
</div>
</section>
<script type="text/template" id="no-results-data-tmpl"></script>
{{#> @panel theme="white" modifiers="compact"}}
<div class="row row--justify-around h-text-align-center-m">
<div class="col col--span-12 col--span-s-10 col--span-l-8">
<h2>Hitta dokument</h2>
<div class="preamble">
<p>
Här kan du söka bland 1000-tals dokument som hör till Swegons produkter.
Utgångna dokument hittar du i vårt arkiv. <a href="#">Klicka här</a> för att komma till arkivet.
Eller sök via ditt ordernummer genom att <a href="#">klicka här</a>.
</p>
</div>
{{> "@search-field" searchField }}
</div>
</div>
{{/@panel}}
{{#if groupedFilter}}
{{render "@filters--grouped-filters" documentsFilter merge="true"}}
{{else}}
{{render "@filters" documentsFilter merge="true"}}
{{/if}}
{
"marketSelectorModal": {
"id": "market-selector",
"closeLabel": "Stäng"
},
"searchField": {
"modifiers": [
"big"
],
"attributes": {
"placeholder": "Sök dokument"
}
},
"documentsFilter": {
"panel": {
"theme": "grey",
"modifiers": "compact,no-padding-top"
}
}
}
No notes defined.