diff --git a/adev/shared-docs/components/select/select.component.html b/adev/shared-docs/components/select/select.component.html index da98bd4a0b38..e370028ccaf5 100644 --- a/adev/shared-docs/components/select/select.component.html +++ b/adev/shared-docs/components/select/select.component.html @@ -57,7 +57,7 @@ [(value)]="selectedValues" [multi]="false" ngComboboxWidget - class="example-listbox" + class="docs-select-listbox" focusMode="activedescendant" tabindex="-1" selectionMode="explicit" @@ -74,12 +74,6 @@ class="docs-select-option" > {{ option.label }} - } diff --git a/adev/shared-docs/components/select/select.component.scss b/adev/shared-docs/components/select/select.component.scss index 90a88ae091f5..88640d24fb6a 100644 --- a/adev/shared-docs/components/select/select.component.scss +++ b/adev/shared-docs/components/select/select.component.scss @@ -5,8 +5,12 @@ width: 100%; display: flex; flex-direction: column; +} + +.docs-combobox-container { border: 1px solid var(--border-color); border-radius: 0.25rem; + overflow: hidden; } .docs-select-input-container { @@ -69,6 +73,8 @@ .docs-select-dialog { position: absolute; + box-sizing: border-box; + width: 100%; left: auto; right: auto; top: auto; @@ -76,6 +82,7 @@ padding: 0; border: 1px solid var(--border-color); border-radius: 0.25rem; + overflow: hidden; background-color: var(--septenary-contrast); color: inherit; @@ -178,16 +185,8 @@ color: var(--vivid-pink); background-color: color-mix(in srgb, var(--vivid-pink) 5%, transparent); } - - &:not([aria-selected='true']) .docs-select-check-icon { - display: none; - } } .docs-select-option-label { flex: 1; } - -.docs-select-check-icon { - font-size: 0.9rem; -} diff --git a/adev/shared-docs/components/select/select.component.ts b/adev/shared-docs/components/select/select.component.ts index 99b0cf00a6a9..1ab6002fc5ac 100644 --- a/adev/shared-docs/components/select/select.component.ts +++ b/adev/shared-docs/components/select/select.component.ts @@ -39,7 +39,6 @@ export class Select implements FormValueControl { readonly id = input.required({alias: 'selectId'}); readonly name = input.required(); readonly options = input.required(); - readonly disabled = input(false); readonly listbox = viewChild(Listbox); readonly combobox = viewChild(Combobox); @@ -76,7 +75,7 @@ export class Select implements FormValueControl { const values = this.selectedValues(); if (values.length) { this.value.set(values[0]); - //this.popupExpanded.set(false); + this.popupExpanded.set(false); } }