src/app/components/choose-version/choose-version.component.ts
Displays an input select
| selector | ccf-choose-version |
| styleUrls | ./choose-version.component.scss |
| templateUrl | ./choose-version.component.html |
Inputs |
Outputs |
| releaseDate | |
Type : ChooseVersion[]
|
|
Default value : []
|
|
|
Details of options in the select |
|
| selectedDate | |
Type : ChooseVersion
|
|
|
Initial selected value in the input select |
|
| selectedVersion | |
Type : EventEmitter
|
|
|
Emits the input select data when an option is selected |
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ChooseVersion } from './choose-version';
/** Displays an input select */
@Component({
selector: 'ccf-choose-version',
templateUrl: './choose-version.component.html',
styleUrls: ['./choose-version.component.scss'],
})
export class ChooseVersionComponent {
/** Details of options in the select */
@Input() releaseDate: ChooseVersion[] = [];
/** Initial selected value in the input select */
@Input() selectedDate?: ChooseVersion;
/** Emits the input select data when an option is selected */
@Output() selectedVersion = new EventEmitter<ChooseVersion>();
}
<mat-select
class="versions"
panelClass="versions-panel"
[value]="selectedDate"
disableOptionCentering
disableRipple
hideSingleSelectionIndicator
>
<mat-option
*ngFor="let date of releaseDate; let index = index"
[value]="date"
class="mat-select-value-text"
id="'option-text-{{ index }}"
(click)="selectedVersion.emit(date)"
>
{{ date.release }}
</mat-option>
</mat-select>
./choose-version.component.scss
:host {
display: flex;
align-items: center;
.versions {
max-width: 22rem;
height: 2.5rem;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #444c65;
border: 1px solid #444c65;
border-radius: 2px;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
::ng-deep .mat-mdc-select-trigger {
height: 100%;
justify-content: space-between;
padding: 0rem 1rem;
letter-spacing: 0.5px;
.mat-mdc-select-value {
width: unset;
}
}
::ng-deep .mat-mdc-select-arrow-wrapper {
padding-left: 12px;
}
}
@media (max-width: 26.75rem) {
.versions {
max-width: unset;
width: calc(100vw - 2rem);
}
}
}
.mat-select-value-text {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.5rem;
letter-spacing: 0.005rem;
color: #444a65;
min-height: 42px;
}
::ng-deep .versions-panel {
position: relative !important;
top: 1px;
}
::ng-deep #option-text.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
background-color: unset;
}
::ng-deep .mat-select-panel {
max-width: unset !important;
}