mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 07:13:32 +00:00
[CL-27] [EC-455] Ng-Select Integration (#3383)
* [CL-27] Select -> Library initial commit * [EC-455] NG-Select Integration * Prettier * [EC-455] [CL-27] Add option for removing items on close // Added loading/no item found text defaults // Fixed disabled bg color // Added templated loading icon * [EC-455] [CL-27] Removed enter override // Fixed backspace removal // Clearing search on add // Gave label select states * [EC-455] [CL-27] Added copy from text to theme * [EC-455] [CL-27] Changed SimpleItemView to type - removed creation logic to shift responsibility to hosting component * [EC-455] [CL-27] Updated custom theme to include CSS variable colors * [CL-27] [EC-455] Initial pass at form field control // initial template for custom value accessor * [EC-455] working baseItem input * [EC-455] working value accessor * [EC-455] Completed FormFieldControl implemntation // fixed badge disabled bug * [EC-455] Prettier * [EC-455] Removed obsolete variables * [EC-455] Private value accessor functions * [EC-455] Cleaned up default variables * [EC-455] Imported Shared module to access i18n pipe // cleaned up string refs * [EC-455] Adjusted padding for clear button // Changed hover color to text-main // Fixed pipe import on stories * [EC-455] FormObj factory * [EC-455] FormObj factory * [EC-455] Updated FormFieldModule import/export statements * [EC-455] Null check ngControl // added strings * [EC-455] Fixed remaining null check // Added standalone story & input * [EC-455] Actually adding the null check * [EC-455] Removed injector logic // Removed Value Accessor PROVIDER // Self-assigned value accessor * [EC-455] Fixed ID copy pasta // Forwarded desribed by to focusable input // Abstracted input for label * [EC-455] Prettier
This commit is contained in:
Vincent Salucci
GitHub
@@ -0,0 +1,7 @@
|
||||
export type SelectItemView = {
|
||||
id: string; // Unique ID used for comparisons
|
||||
listName: string; // Default bindValue -> this is what will be displayed in list items
|
||||
labelName: string; // This is what will be displayed in the selection option badge
|
||||
icon: string; // Icon to display within the list
|
||||
parentGrouping: string; // Used to group items by parent
|
||||
};
|
||||
55
libs/components/src/multi-select/multi-select.component.html
Normal file
55
libs/components/src/multi-select/multi-select.component.html
Normal file
@@ -0,0 +1,55 @@
|
||||
<ng-select
|
||||
[items]="baseItems"
|
||||
[(ngModel)]="selectedItems"
|
||||
(ngModelChange)="onChange($event)"
|
||||
(blur)="onBlur()"
|
||||
bindLabel="listName"
|
||||
groupBy="parentGrouping"
|
||||
[placeholder]="placeholder"
|
||||
[loading]="loading"
|
||||
[loadingText]="loadingText"
|
||||
notFoundText="{{ 'multiSelectNotFound' | i18n }}"
|
||||
clearAllText="{{ 'multiSelectClearAll' | i18n }}"
|
||||
[multiple]="true"
|
||||
[selectOnTab]="true"
|
||||
[closeOnSelect]="false"
|
||||
(close)="onDropdownClosed()"
|
||||
[disabled]="disabled"
|
||||
[clearSearchOnAdd]="true"
|
||||
[labelForId]="labelForId"
|
||||
>
|
||||
<ng-template ng-loadingspinner-tmp>
|
||||
<i class="bwi bwi-spinner bwi-spin tw-mr-1" [title]="loadingText" aria-hidden="true"></i>
|
||||
</ng-template>
|
||||
<ng-template ng-label-tmp let-item="item" let-clear="clear">
|
||||
<button
|
||||
type="button"
|
||||
bitBadge
|
||||
badgeType="primary"
|
||||
class="tw-mr-1 disabled:tw-border-0"
|
||||
[disabled]="disabled"
|
||||
(click)="clear(item)"
|
||||
>
|
||||
<i
|
||||
*ngIf="item.icon != null"
|
||||
class="tw-mr-1 bwi bwi-fw {{ item.icon }}"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
{{ item.labelName }}
|
||||
<i class="bwi bwi-fw bwi-close bwi-sm tw-ml-1" aria-hidden="true"></i>
|
||||
</button>
|
||||
</ng-template>
|
||||
<ng-template ng-option-tmp let-item="item">
|
||||
<div class="tw-flex">
|
||||
<div class="tw-w-7 tw-flex-none">
|
||||
<i *ngIf="isSelected(item)" class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="tw-mr-2 tw-flex-initial">
|
||||
<i *ngIf="item.icon != null" class="bwi bwi-fw {{ item.icon }}" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="tw-flex-1">
|
||||
{{ item.listName }}
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-select>
|
||||
179
libs/components/src/multi-select/multi-select.component.ts
Normal file
179
libs/components/src/multi-select/multi-select.component.ts
Normal file
@@ -0,0 +1,179 @@
|
||||
import {
|
||||
Component,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild,
|
||||
EventEmitter,
|
||||
HostBinding,
|
||||
Optional,
|
||||
Self,
|
||||
} from "@angular/core";
|
||||
import { ControlValueAccessor, NgControl, Validators } from "@angular/forms";
|
||||
import { NgSelectComponent } from "@ng-select/ng-select";
|
||||
|
||||
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
|
||||
|
||||
import { BitFormFieldControl } from "../form-field/form-field-control";
|
||||
|
||||
import { SelectItemView } from "./models/select-item-view";
|
||||
|
||||
// Increments for each instance of this component
|
||||
let nextId = 0;
|
||||
|
||||
@Component({
|
||||
selector: "bit-multi-select",
|
||||
templateUrl: "./multi-select.component.html",
|
||||
providers: [{ provide: BitFormFieldControl, useExisting: MultiSelectComponent }],
|
||||
})
|
||||
/**
|
||||
* This component has been implemented to only support Multi-select list events
|
||||
*/
|
||||
export class MultiSelectComponent implements OnInit, BitFormFieldControl, ControlValueAccessor {
|
||||
@ViewChild(NgSelectComponent) select: NgSelectComponent;
|
||||
|
||||
// Parent component should only pass selectable items (complete list - selected items = baseItems)
|
||||
@Input() baseItems: SelectItemView[];
|
||||
// Defaults to native ng-select behavior - set to "true" to clear selected items on dropdown close
|
||||
@Input() removeSelectedItems = false;
|
||||
@Input() placeholder: string;
|
||||
@Input() loading = false;
|
||||
@Input() disabled = false;
|
||||
|
||||
// Internal tracking of selected items
|
||||
@Input() selectedItems: SelectItemView[];
|
||||
|
||||
// Default values for our implementation
|
||||
loadingText: string;
|
||||
|
||||
protected searchInputId = `search-input-${nextId++}`;
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
private notifyOnChange?: (value: SelectItemView[]) => void;
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
private notifyOnTouched?: () => void;
|
||||
|
||||
@Output() onItemsConfirmed = new EventEmitter<any[]>();
|
||||
|
||||
constructor(private i18nService: I18nService, @Optional() @Self() private ngControl?: NgControl) {
|
||||
if (ngControl != null) {
|
||||
ngControl.valueAccessor = this;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
// Default Text Values
|
||||
this.placeholder = this.placeholder ?? this.i18nService.t("multiSelectPlaceholder");
|
||||
this.loadingText = this.i18nService.t("multiSelectLoading");
|
||||
}
|
||||
|
||||
/** Helper method for showing selected state in custom template */
|
||||
isSelected(item: any): boolean {
|
||||
return this.selectedItems?.find((selected) => selected.id === item.id) != undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* The `close` callback will act as the only trigger for signifying the user's intent of completing the selection
|
||||
* of items. Selected items will be emitted to the parent component in order to allow for separate data handling.
|
||||
*/
|
||||
onDropdownClosed(): void {
|
||||
// Early exit
|
||||
if (this.selectedItems == null || this.selectedItems.length == 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Emit results to parent component
|
||||
this.onItemsConfirmed.emit(this.selectedItems);
|
||||
|
||||
// Remove selected items from base list based on input property
|
||||
if (this.removeSelectedItems) {
|
||||
let updatedBaseItems = this.baseItems;
|
||||
this.selectedItems.forEach((selectedItem) => {
|
||||
updatedBaseItems = updatedBaseItems.filter((item) => selectedItem.id !== item.id);
|
||||
});
|
||||
|
||||
// Reset Lists
|
||||
this.selectedItems = null;
|
||||
this.baseItems = updatedBaseItems;
|
||||
}
|
||||
}
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
writeValue(obj: SelectItemView[]): void {
|
||||
this.selectedItems = obj;
|
||||
}
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
registerOnChange(fn: (value: SelectItemView[]) => void): void {
|
||||
this.notifyOnChange = fn;
|
||||
}
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
registerOnTouched(fn: any): void {
|
||||
this.notifyOnTouched = fn;
|
||||
}
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.disabled = isDisabled;
|
||||
}
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
protected onChange(items: SelectItemView[]) {
|
||||
if (!this.notifyOnChange) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.notifyOnChange(items);
|
||||
}
|
||||
|
||||
/**Implemented as part of NG_VALUE_ACCESSOR */
|
||||
protected onBlur() {
|
||||
if (!this.notifyOnTouched) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.notifyOnTouched();
|
||||
}
|
||||
|
||||
/**Implemented as part of BitFormFieldControl */
|
||||
@HostBinding("attr.aria-describedby")
|
||||
get ariaDescribedBy() {
|
||||
return this._ariaDescribedBy;
|
||||
}
|
||||
set ariaDescribedBy(value: string) {
|
||||
this._ariaDescribedBy = value;
|
||||
this.select?.searchInput.nativeElement.setAttribute("aria-describedby", value);
|
||||
}
|
||||
private _ariaDescribedBy: string;
|
||||
|
||||
/**Implemented as part of BitFormFieldControl */
|
||||
get labelForId() {
|
||||
return this.searchInputId;
|
||||
}
|
||||
|
||||
/**Implemented as part of BitFormFieldControl */
|
||||
@HostBinding() @Input() id = `bit-multi-select-${nextId++}`;
|
||||
|
||||
/**Implemented as part of BitFormFieldControl */
|
||||
@HostBinding("attr.required")
|
||||
@Input()
|
||||
get required() {
|
||||
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
|
||||
}
|
||||
set required(value: any) {
|
||||
this._required = value != null && value !== false;
|
||||
}
|
||||
private _required: boolean;
|
||||
|
||||
/**Implemented as part of BitFormFieldControl */
|
||||
get hasError() {
|
||||
return this.ngControl?.status === "INVALID" && this.ngControl?.touched;
|
||||
}
|
||||
|
||||
/**Implemented as part of BitFormFieldControl */
|
||||
get error(): [string, any] {
|
||||
const key = Object.keys(this.ngControl?.errors)[0];
|
||||
return [key, this.ngControl?.errors[key]];
|
||||
}
|
||||
}
|
||||
16
libs/components/src/multi-select/multi-select.module.ts
Normal file
16
libs/components/src/multi-select/multi-select.module.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { NgModule } from "@angular/core";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
import { NgSelectModule } from "@ng-select/ng-select";
|
||||
|
||||
import { BadgeModule } from "../badge";
|
||||
import { SharedModule } from "../shared";
|
||||
|
||||
import { MultiSelectComponent } from "./multi-select.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, FormsModule, NgSelectModule, BadgeModule, SharedModule],
|
||||
exports: [MultiSelectComponent],
|
||||
declarations: [MultiSelectComponent],
|
||||
})
|
||||
export class MultiSelectModule {}
|
||||
394
libs/components/src/multi-select/scss/bw.theme.scss
Normal file
394
libs/components/src/multi-select/scss/bw.theme.scss
Normal file
@@ -0,0 +1,394 @@
|
||||
// Default theme copied from https://github.com/ng-select/ng-select/blob/master/src/ng-select/themes/default.theme.scss
|
||||
@mixin rtl {
|
||||
@at-root [dir="rtl"] #{&} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$ng-select-highlight: rgb(var(--color-primary-700)) !default;
|
||||
$ng-select-primary-text: rgb(var(--color-text-main)) !default;
|
||||
$ng-select-disabled-text: rgb(var(--color-secondary-100)) !default;
|
||||
$ng-select-border: rgb(var(--color-secondary-500)) !default;
|
||||
$ng-select-border-radius: 4px !default;
|
||||
$ng-select-bg: rgb(var(--color-background-alt)) !default;
|
||||
$ng-select-selected: transparent !default;
|
||||
$ng-select-selected-text: $ng-select-primary-text !default;
|
||||
|
||||
$ng-select-marked: rgb(var(--color-text-main) / 0.12) !default;
|
||||
$ng-select-marked-text: $ng-select-primary-text !default;
|
||||
|
||||
$ng-select-box-shadow: none !default;
|
||||
$ng-select-placeholder: rgb(var(--color-text-muted)) !default;
|
||||
$ng-select-height: 36px !default;
|
||||
$ng-select-value-padding-left: 10px !default;
|
||||
$ng-select-value-font-size: 0.9em !default;
|
||||
$ng-select-value-text: $ng-select-primary-text !default;
|
||||
|
||||
$ng-select-dropdown-bg: $ng-select-bg !default;
|
||||
$ng-select-dropdown-border: $ng-select-border !default;
|
||||
$ng-select-dropdown-optgroup-text: rgb(var(--color-text-muted)) !default;
|
||||
$ng-select-dropdown-optgroup-marked: $ng-select-dropdown-optgroup-text !default;
|
||||
$ng-select-dropdown-option-bg: $ng-select-dropdown-bg !default;
|
||||
$ng-select-dropdown-option-text: $ng-select-primary-text !default;
|
||||
$ng-select-dropdown-option-disabled: rgb(var(--color-text-muted) / 0.6) !default;
|
||||
|
||||
$ng-select-input-text: $ng-select-primary-text !default;
|
||||
|
||||
// Custom color variables
|
||||
$ng-select-arrow-hover: rgb(var(--color-secondary-700)) !default;
|
||||
$ng-clear-icon-hover: rgb(var(--color-text-main)) !default;
|
||||
$ng-dropdown-shadow: rgb(var(--color-secondary-100)) !default;
|
||||
|
||||
.ng-select {
|
||||
&.ng-select-opened {
|
||||
> .ng-select-container {
|
||||
background: $ng-select-bg;
|
||||
border-color: $ng-select-border;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.ng-arrow {
|
||||
top: -2px;
|
||||
border-color: transparent transparent $ng-select-arrow-hover;
|
||||
border-width: 0 5px 5px;
|
||||
&:hover {
|
||||
border-color: transparent transparent $ng-select-arrow-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-top {
|
||||
> .ng-select-container {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
&.ng-select-right {
|
||||
> .ng-select-container {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
&.ng-select-bottom {
|
||||
> .ng-select-container {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
&.ng-select-left {
|
||||
> .ng-select-container {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-focused {
|
||||
&:not(.ng-select-opened) > .ng-select-container {
|
||||
border-color: $ng-select-highlight;
|
||||
box-shadow: $ng-select-box-shadow;
|
||||
}
|
||||
}
|
||||
&.ng-select-disabled {
|
||||
> .ng-select-container {
|
||||
background-color: $ng-select-disabled-text;
|
||||
}
|
||||
}
|
||||
.ng-has-value .ng-placeholder {
|
||||
display: none;
|
||||
}
|
||||
.ng-select-container {
|
||||
color: $ng-select-primary-text;
|
||||
background-color: $ng-select-bg;
|
||||
border-radius: $ng-select-border-radius;
|
||||
border: 1px solid $ng-select-border;
|
||||
min-height: $ng-select-height;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
box-shadow: 0 1px 0 $ng-dropdown-shadow;
|
||||
}
|
||||
.ng-value-container {
|
||||
align-items: center;
|
||||
padding-left: $ng-select-value-padding-left;
|
||||
@include rtl {
|
||||
padding-right: $ng-select-value-padding-left;
|
||||
padding-left: 0;
|
||||
}
|
||||
.ng-placeholder {
|
||||
color: $ng-select-placeholder;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-single {
|
||||
.ng-select-container {
|
||||
height: $ng-select-height;
|
||||
.ng-value-container {
|
||||
.ng-input {
|
||||
top: 5px;
|
||||
left: 0;
|
||||
padding-left: $ng-select-value-padding-left;
|
||||
padding-right: 50px;
|
||||
@include rtl {
|
||||
padding-right: $ng-select-value-padding-left;
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-multiple {
|
||||
&.ng-select-disabled {
|
||||
> .ng-select-container .ng-value-container .ng-value {
|
||||
background-color: $ng-select-disabled-text;
|
||||
border: 0px solid $ng-select-border; // Removing border on slected value when disabled
|
||||
.ng-value-label {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ng-select-container {
|
||||
.ng-value-container {
|
||||
padding-top: 5px;
|
||||
padding-left: 7px;
|
||||
@include rtl {
|
||||
padding-right: 7px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.ng-value {
|
||||
font-size: $ng-select-value-font-size;
|
||||
margin-bottom: 5px;
|
||||
color: $ng-select-value-text;
|
||||
background-color: $ng-select-selected;
|
||||
border-radius: 2px;
|
||||
margin-right: 5px;
|
||||
@include rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
&.ng-value-disabled {
|
||||
background-color: $ng-select-disabled-text;
|
||||
.ng-value-label {
|
||||
padding-left: 5px;
|
||||
@include rtl {
|
||||
padding-left: 0;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ng-value-label {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.ng-value-icon {
|
||||
display: inline-block;
|
||||
padding: 1px 5px;
|
||||
&:hover {
|
||||
background-color: $ng-select-arrow-hover;
|
||||
}
|
||||
&.left {
|
||||
border-right: 1px solid $ng-select-selected;
|
||||
@include rtl {
|
||||
border-left: 1px solid $ng-select-selected;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
&.right {
|
||||
border-left: 1px solid $ng-select-selected;
|
||||
@include rtl {
|
||||
border-left: 0;
|
||||
border-right: 1px solid $ng-select-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ng-input {
|
||||
padding: 0 0 3px 3px;
|
||||
@include rtl {
|
||||
padding: 0 3px 3px 0;
|
||||
}
|
||||
> input {
|
||||
color: $ng-select-input-text;
|
||||
}
|
||||
}
|
||||
.ng-placeholder {
|
||||
top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 3px;
|
||||
@include rtl {
|
||||
padding-right: 3px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ng-clear-wrapper {
|
||||
color: $ng-select-placeholder;
|
||||
padding-top: 2.5px;
|
||||
&:hover .ng-clear {
|
||||
color: $ng-clear-icon-hover;
|
||||
}
|
||||
}
|
||||
.ng-spinner-zone {
|
||||
padding: 5px 5px 0 0;
|
||||
|
||||
@include rtl {
|
||||
padding: 5px 0 0 5px;
|
||||
}
|
||||
}
|
||||
.ng-arrow-wrapper {
|
||||
width: 25px;
|
||||
padding-right: 5px;
|
||||
@include rtl {
|
||||
padding-left: 5px;
|
||||
padding-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
.ng-arrow {
|
||||
border-top-color: $ng-select-arrow-hover;
|
||||
}
|
||||
}
|
||||
.ng-arrow {
|
||||
border-color: $ng-select-placeholder transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 2.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ng-dropdown-panel {
|
||||
background-color: $ng-select-dropdown-bg;
|
||||
border: 1px solid $ng-select-dropdown-border;
|
||||
box-shadow: 0 1px 0 $ng-dropdown-shadow;
|
||||
left: 0;
|
||||
&.ng-select-top {
|
||||
bottom: 100%;
|
||||
border-top-right-radius: $ng-select-border-radius;
|
||||
border-top-left-radius: $ng-select-border-radius;
|
||||
border-bottom-color: $ng-select-border;
|
||||
margin-bottom: -1px;
|
||||
.ng-dropdown-panel-items {
|
||||
.ng-option {
|
||||
&:first-child {
|
||||
border-top-right-radius: $ng-select-border-radius;
|
||||
border-top-left-radius: $ng-select-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-right {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
border-top-right-radius: $ng-select-border-radius;
|
||||
border-bottom-right-radius: $ng-select-border-radius;
|
||||
border-bottom-left-radius: $ng-select-border-radius;
|
||||
border-bottom-color: $ng-select-border;
|
||||
margin-bottom: -1px;
|
||||
.ng-dropdown-panel-items {
|
||||
.ng-option {
|
||||
&:first-child {
|
||||
border-top-right-radius: $ng-select-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-bottom {
|
||||
top: 100%;
|
||||
border-bottom-right-radius: $ng-select-border-radius;
|
||||
border-bottom-left-radius: $ng-select-border-radius;
|
||||
border-top-color: $ng-select-border;
|
||||
margin-top: -1px;
|
||||
.ng-dropdown-panel-items {
|
||||
.ng-option {
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $ng-select-border-radius;
|
||||
border-bottom-left-radius: $ng-select-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ng-select-left {
|
||||
left: -100%;
|
||||
top: 0;
|
||||
border-top-left-radius: $ng-select-border-radius;
|
||||
border-bottom-right-radius: $ng-select-border-radius;
|
||||
border-bottom-left-radius: $ng-select-border-radius;
|
||||
border-bottom-color: $ng-select-border;
|
||||
margin-bottom: -1px;
|
||||
.ng-dropdown-panel-items {
|
||||
.ng-option {
|
||||
&:first-child {
|
||||
border-top-left-radius: $ng-select-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ng-dropdown-header {
|
||||
border-bottom: 1px solid $ng-select-border;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.ng-dropdown-footer {
|
||||
border-top: 1px solid $ng-select-border;
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.ng-dropdown-panel-items {
|
||||
.ng-optgroup {
|
||||
user-select: none;
|
||||
padding: 8px 10px;
|
||||
font-weight: 500;
|
||||
color: $ng-select-dropdown-optgroup-text;
|
||||
cursor: pointer;
|
||||
&.ng-option-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
&.ng-option-marked {
|
||||
background-color: $ng-select-marked;
|
||||
}
|
||||
&.ng-option-selected,
|
||||
&.ng-option-selected.ng-option-marked {
|
||||
color: $ng-select-dropdown-optgroup-marked;
|
||||
background-color: $ng-select-selected;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.ng-option {
|
||||
background-color: $ng-select-dropdown-option-bg;
|
||||
color: $ng-select-dropdown-option-text;
|
||||
padding: 8px 10px;
|
||||
&.ng-option-selected,
|
||||
&.ng-option-selected.ng-option-marked {
|
||||
color: $ng-select-selected-text;
|
||||
background-color: $ng-select-selected;
|
||||
.ng-option-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
&.ng-option-marked {
|
||||
background-color: $ng-select-marked;
|
||||
color: $ng-select-marked-text;
|
||||
}
|
||||
&.ng-option-disabled {
|
||||
color: $ng-select-dropdown-option-disabled;
|
||||
}
|
||||
&.ng-option-child {
|
||||
padding-left: 22px;
|
||||
@include rtl {
|
||||
padding-right: 22px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.ng-tag-label {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
padding-right: 5px;
|
||||
@include rtl {
|
||||
padding-left: 5px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user