diff --git a/src/app/filter-tag/filter-tag.component.html b/src/app/filter-tag/filter-tag.component.html index c72de090..67beca39 100644 --- a/src/app/filter-tag/filter-tag.component.html +++ b/src/app/filter-tag/filter-tag.component.html @@ -1,89 +1,89 @@ -
-

- <vgr-filter-tag> är avsedd att användas för att representera filter i en sökning. I kombination med - <vgr-filter-tag-group> kan filtren navigeras med piltangenterna. -

-
- Filter - Fokusera -
-
-

Förändras med tema: - ja -

+
+

+ <vgr-filter-tag> är avsedd att användas för att representera filter i en sökning. I kombination med + <vgr-filter-tag-group> kan filtren navigeras med piltangenterna. +

+
+ Aktiv + Inaktiv
+

Förändras med tema: + ja +

+
-
-
Enkelt exempel - den filtrerade texten finns i För- eller Efternamn.
- - Lägg till filter - Ta bort alla filter - {{filtersDisabled ? 'Aktivera' : 'Inaktivera'}} filtertaggar - Fokusera -
-
- - {{filter.text}} - -
-
    -
    -
    Förnamn
    -
    Efternamn
    +
    Enkelt exempel - skriv in text och tryck sedan på "lägg till filter" -knappen för att filtrera resultat i listan nedan.
    +
    +
    + + Lägg till filter + Rensa filtrering +
    +
    + + {{filter.text}} +
    -
  • -
    -
    {{person.firstName}}
    -
    {{person.surname}}
    +
      +
      +
      Förnamn
      +
      Efternamn
      - -
    -
    -
    Avancerat exempel - Filtrera på Namn (För- eller Efternamn) samt möjlighet att filtrera på minimiålder och kön.
    -
    -
    -
    -
    -
    Namn:
    -
    - -
    +
  • +
    +
    {{value.firstName}}
    +
    {{value.surname}}
    -
    -
    Minimiålder:
    +
    • +
+
+
Avancerat exempel - Filtrera på Namn (För- eller Efternamn) samt möjlighet att filtrera på minimiålder och kön.
+
+ +
+
+
+
Namn
+
+ +
+
+
+
Minimiålder
+
+ +
+
- + +
+ Filtrera + Rensa filtrering
-
- - -
- Filtrera - Ta bort alla filter
+ +
+ + {{tag.text}} +
- -
- - {{tag.text}} - -
-
    -
    -
    Förnamn
    -
    Efternamn
    -
    Ålder
    -
    -
  • -
    -
    {{person.firstName}}
    -
    {{person.surname}}
    -
    {{person.age}}
    +
      +
      +
      Förnamn
      +
      Efternamn
      +
      Ålder
      - -
    +
  • +
    +
    {{value.firstName}}
    +
    {{value.surname}}
    +
    {{value.age}}
    +
    +
    • +
+
@@ -115,9 +115,9 @@

- <vgr-filter-tag> har ett intern element av typen button och har alla dess WCAG egenskaper. - Default sätts attr.aria-label till "Ta bort filtrering [text]", där [text] är content för <vgr-filter-tag>. + <vgr-filter-tag> har ett intern element av typen button och har alla dess WCAG egenskaper. + Default sätts attr.aria-label till "Ta bort filtrering [text]", där [text] är content för <vgr-filter-tag>. Om input variabeln [disabled] sätts till true sätts även aria.aria-disabled till true

- \ No newline at end of file + diff --git a/src/app/filter-tag/filter-tag.component.scss b/src/app/filter-tag/filter-tag.component.scss new file mode 100644 index 00000000..04a4396d --- /dev/null +++ b/src/app/filter-tag/filter-tag.component.scss @@ -0,0 +1,23 @@ +@import "partials/_settings.sizes.scss"; + +.list-row { + width: 500px; display: flex; +} + +.list-column { + width: 120px; +} + +.list-header { + font-weight: bold; +} + +.oversikt { + margin: 20px 0; + display: flex; + justify-content: space-between; + width: 20%; + @media screen and (min-width: $desktop-width--medium) { + width: 22%; + } +} diff --git a/src/app/filter-tag/filter-tag.component.ts b/src/app/filter-tag/filter-tag.component.ts index 0953dc9e..9c38bb5c 100644 --- a/src/app/filter-tag/filter-tag.component.ts +++ b/src/app/filter-tag/filter-tag.component.ts @@ -11,7 +11,7 @@ interface FilterTag { @Component({ selector: 'app-filter-tag', templateUrl: './filter-tag.component.html', - styles: ['.list-row { width: 500px; display: flex}', '.list-column { width: 120px; }', '.list-header { font-weight: bold;}'] + styleUrls: ['./filter-tag.component.scss'] }) export class FilterTagComponent implements OnInit { @ViewChild('myFilterGroup', {read: FilterTagGroupComponent}) myFilterGroup: FilterTagGroupComponent;