Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions doc-site/components/nve-combobox.md
Original file line number Diff line number Diff line change
Expand Up @@ -492,6 +492,31 @@ Bruk attributtet <span class="highlight">disabled</span> for å deaktivere combo
```html
<nve-combobox id="nve-avdeling-11" label="Velg en avdeling" disabled options='[{ "value":"rme","label": "RME" }]'>
</nve-combobox>

<nve-combobox
id="nve-avdeling-11_01"
label="Velg en avdeling"
multiple
disabled
selectedValues='["rme", "tb"]'
options='[
{ "value":"rme","label": "RME" },
{ "value":"ek","label": "EK" },
{ "value":"tb","label": "TB" }
]'
>
</nve-combobox>

<nve-combobox
id="nve-avdeling-11_02"
label="Velg en avdeling"
selectedValues='["rme"]'
disabled
options='[
{ "value":"rme","label": "RME" }
]'
>
</nve-combobox>
```

</CodeExamplePreview>
Expand Down Expand Up @@ -524,6 +549,31 @@ Bruk <span class="highlight">readonly</span> for å stenge mulighet for å endre
```html
<nve-combobox id="nve-avdeling-12" label="Velg en avdeling" readonly options='[{ "value":"rme","label": "RME" }]'>
</nve-combobox>

<nve-combobox
id="nve-avdeling-12_01"
label="Velg en avdeling"
multiple
readonly
selectedValues='["rme", "tb"]'
options='[
{ "value":"rme","label": "RME" },
{ "value":"ek","label": "EK" },
{ "value":"tb","label": "TB" }
]'
>
</nve-combobox>

<nve-combobox
id="nve-avdeling-12_02"
label="Velg en avdeling"
selectedValues='["rme"]'
readonly
options='[
{ "value":"rme","label": "RME" }
]'
>
</nve-combobox>
```

</CodeExamplePreview>
Expand Down
8 changes: 8 additions & 0 deletions src/components/nve-combobox/nve-combobox.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,14 @@ export default css`
input {
color: var(--color-interactive-foreground-tertiary-disabled);
}
.combobox__value__tag,
.combobox__value__indicator {
border-color: var(--color-interactive-border-tertiary-disabled);
background: var(--color-interactive-background-tertiary-disabled);
> nve-icon {
color: var(--color-interactive-foreground-tertiary-disabled);
}
}
}

.combobox__value--hidden {
Expand Down
Loading