From c6ca0225ba28fcd1d31790b1902ece15a297b636 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 09:46:04 +0300 Subject: [PATCH 01/57] feat(select): use common shape, size and status types --- .../theme/components/select/select.component.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index a401a6c916..15e8daac4e 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -41,6 +41,9 @@ import { NbTriggerStrategy, NbTriggerStrategyBuilderService, } from '../cdk'; +import { NbComponentSize } from '../component-size'; +import { NbComponentShape } from '../component-shape'; +import { NbComponentStatus } from '../component-status'; import { NbOptionComponent } from './option.component'; import { NbButtonComponent } from '../button/button.component'; import { NB_DOCUMENT } from '../../theme.options'; @@ -158,20 +161,20 @@ export class NbSelectLabelComponent { export class NbSelectComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy, ControlValueAccessor { /** * Select size, available sizes: - * `xxsmall`, `xsmall`, `small`, `medium`, `large` + * `tiny`, `small`, `medium` (default), `large`, `giant` */ - @Input() size: string; + @Input() size: NbComponentSize = 'medium'; /** * Select status (adds specific styles): * `primary`, `info`, `success`, `warning`, `danger` */ - @Input() status: string = 'primary'; + @Input() status: '' | NbComponentStatus = ''; /** - * Select shapes: `rectangle`, `round`, `semi-round` + * Select shapes: `rectangle` (default), `round`, `semi-round` */ - @Input() shape: string; + @Input() shape: NbComponentShape = 'rectangle'; /** * Adds `hero` styles From a82fd74f19b03ce1125301f18faaebc1588aaf33 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 09:46:53 +0300 Subject: [PATCH 02/57] feat(select): use nb-icon for arrow BREAKING CHANGE: Arrow selector and element changed to svg icon. --- src/framework/theme/components/select/select.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index f26fa4be67..a7981784db 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -24,6 +24,7 @@ {{ placeholder }} + From 4e85e957c46cad869643a448c5c36f52785be3fb Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 09:58:30 +0300 Subject: [PATCH 03/57] refactor(select): remove named inputs --- .../components/select/select.component.ts | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 15e8daac4e..0612c4043b 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -209,18 +209,27 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent /** * Accepts selected item or array of selected items. * */ - @Input('selected') - set setSelected(value: T | T[]) { + @Input() + set selected(value: T | T[]) { this.writeValue(value); } + get selected(): T | T[] { + return this.multiple + ? this.selectionModel.map(o => o.value) + : this.selectionModel[0].value; + } /** * Gives capability just write `multiple` over the element. * */ - @Input('multiple') - set setMultiple(multiple: boolean) { - this.multiple = convertToBoolProperty(multiple); + @Input() + get multiple(): boolean { + return this._multiple; + } + set multiple(value: boolean) { + this._multiple = convertToBoolProperty(value); } + private _multiple: boolean = false; /** * List of `NbOptionComponent`'s components passed as content. @@ -240,8 +249,6 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent @ViewChild(NbButtonComponent, { read: ElementRef }) button: ElementRef; - multiple: boolean = false; - /** * List of selected options. * */ From 5e885fdf03c652743df48f832d3b8429262cd6a1 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:15:40 +0300 Subject: [PATCH 04/57] fix(select): import icon module --- .../theme/components/select/select.module.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/select.module.ts b/src/framework/theme/components/select/select.module.ts index 21cacbe794..0a36f94442 100644 --- a/src/framework/theme/components/select/select.module.ts +++ b/src/framework/theme/components/select/select.module.ts @@ -9,7 +9,7 @@ import { NbButtonModule } from '../button/button.module'; import { NbSelectComponent, NbSelectLabelComponent } from './select.component'; import { NbOptionComponent } from './option.component'; import { NbOptionGroupComponent } from './option-group.component'; - +import { NbIconModule } from '../icon/icon.module'; const NB_SELECT_COMPONENTS = [ NbSelectComponent, @@ -19,7 +19,15 @@ const NB_SELECT_COMPONENTS = [ ]; @NgModule({ - imports: [NbSharedModule, NbOverlayModule, NbButtonModule, NbInputModule, NbCardModule, NbCheckboxModule], + imports: [ + NbSharedModule, + NbOverlayModule, + NbButtonModule, + NbInputModule, + NbCardModule, + NbCheckboxModule, + NbIconModule, + ], exports: [...NB_SELECT_COMPONENTS], declarations: [...NB_SELECT_COMPONENTS], }) From 33ef96a59bdf86a027424923ec7b46547ca7b714 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:18:16 +0300 Subject: [PATCH 05/57] refactor(select): boolean attributes for appearance, width and multiple --- .../components/select/select.component.ts | 65 +++++++++++++++---- 1 file changed, 51 insertions(+), 14 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 0612c4043b..290353add9 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -16,6 +16,7 @@ import { ElementRef, EventEmitter, forwardRef, + HostBinding, Inject, Input, OnDestroy, @@ -49,6 +50,7 @@ import { NbButtonComponent } from '../button/button.component'; import { NB_DOCUMENT } from '../../theme.options'; import { convertToBoolProperty } from '../helpers'; +export type NbSelectAppearance = 'outline' | 'filled' | 'hero'; @Component({ selector: 'nb-select-label', @@ -177,34 +179,64 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent @Input() shape: NbComponentShape = 'rectangle'; /** - * Adds `hero` styles + * Select appearances: `outline`, `filled`, `hero` */ - @Input() hero: boolean; + @Input() appearance: NbSelectAppearance = 'outline'; /** - * Disables the select + * Adds `outline` styles */ - @Input() disabled: boolean; + @Input() + @HostBinding('class.appearance-outline') + get outline(): boolean { + return this.appearance === 'outline'; + } + set outline(value: boolean) { + this._outline = convertToBoolProperty(value); + } + protected _outline: boolean = false; /** - * If set element will fill its container + * Adds `hero` styles */ - @Input() fullWidth: boolean; + @Input() + @HostBinding('class.appearance-hero') + get hero(): boolean { + return this.appearance === 'hero'; + } + set hero(value: boolean) { + this._hero = convertToBoolProperty(value); + } + protected _hero: boolean = false; /** - * Adds `outline` styles + * Disables the select */ - @Input() outline: boolean; + @Input() + get disabled(): boolean { + return !!this._disabled; + } + set disabled(value: boolean) { + this._disabled = convertToBoolProperty(value); + } + protected _disabled: boolean; /** - * Renders select placeholder if nothing selected. - * */ - @Input() placeholder: string = ''; + * If set element will fill its container + */ + @Input() + get fullWidth(): boolean { + return this._fullWidth; + } + set fullWidth(value: boolean) { + this._fullWidth = convertToBoolProperty(value); + } + protected _fullWidth: boolean = false; /** - * Will be emitted when selected value changes. + * Renders select placeholder if nothing selected. * */ - @Output() selectedChange: EventEmitter = new EventEmitter(); + @Input() placeholder: string = ''; /** * Accepts selected item or array of selected items. @@ -229,7 +261,12 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent set multiple(value: boolean) { this._multiple = convertToBoolProperty(value); } - private _multiple: boolean = false; + protected _multiple: boolean = false; + + /** + * Will be emitted when selected value changes. + * */ + @Output() selectedChange: EventEmitter = new EventEmitter(); /** * List of `NbOptionComponent`'s components passed as content. From 4ddee442740df71527d6637d7b55b5b1ace0aae2 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:20:49 +0300 Subject: [PATCH 06/57] refactor(option): remove named input --- .../theme/components/select/option.component.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts index a7c22263f9..bc3ce49dbb 100644 --- a/src/framework/theme/components/select/option.component.ts +++ b/src/framework/theme/components/select/option.component.ts @@ -47,10 +47,14 @@ export class NbOptionComponent implements OnDestroy { * */ @Input() value: T; - @Input('disabled') - set setDisabled(disabled: boolean) { - this.disabled = convertToBoolProperty(disabled); + @Input() + get disabled(): boolean { + return this._disabled; } + set disabled(value: boolean) { + this._disabled = convertToBoolProperty(value); + } + protected _disabled: boolean = false; /** * Fires value when option selection change. @@ -66,7 +70,6 @@ export class NbOptionComponent implements OnDestroy { } selected: boolean = false; - disabled: boolean = false; private alive: boolean = true; constructor(@Inject(forwardRef(() => NbSelectComponent)) protected parent, From f0f99c788f710a2d8b05161245c4274eaf340882 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:24:37 +0300 Subject: [PATCH 07/57] feat(select): add missing 'filled' appearance input --- .../theme/components/select/select.component.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 290353add9..5a5dcf27b3 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -179,7 +179,7 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent @Input() shape: NbComponentShape = 'rectangle'; /** - * Select appearances: `outline`, `filled`, `hero` + * Select appearances: `outline` (default), `filled`, `hero` */ @Input() appearance: NbSelectAppearance = 'outline'; @@ -196,6 +196,19 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent } protected _outline: boolean = false; + /** + * Adds `filled` styles + */ + @Input() + @HostBinding('class.appearance-filled') + get filled(): boolean { + return this.appearance === 'filled'; + } + set filled(value: boolean) { + this._filled = convertToBoolProperty(value); + } + protected _filled: boolean = false; + /** * Adds `hero` styles */ From e7cc521f6a4ddd007c3835034d24b75003eb611f Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:29:51 +0300 Subject: [PATCH 08/57] refactor(select): move open class to host BREAKING CHANGE: NbSelectComponent 'isOpened' getter renamed to 'isOpen' --- .../components/select/select.component.ts | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 5a5dcf27b3..9ff774d79b 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -299,6 +299,14 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent @ViewChild(NbButtonComponent, { read: ElementRef }) button: ElementRef; + /** + * Determines is select opened. + * */ + @HostBinding('class.open') + get isOpen(): boolean { + return this.ref && this.ref.hasAttached(); + } + /** * List of selected options. * */ @@ -348,18 +356,11 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent protected cd: ChangeDetectorRef) { } - /** - * Determines is select opened. - * */ - get isOpened(): boolean { - return this.ref && this.ref.hasAttached(); - } - /** * Determines is select hidden. * */ get isHidden(): boolean { - return !this.isOpened; + return !this.isOpen; } /** @@ -424,7 +425,7 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent } hide() { - if (this.isOpened) { + if (this.isOpen) { this.ref.detach(); this.cd.markForCheck(); } From 1f548c179dda4251eb418e46e93effd7952619a1 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:30:49 +0300 Subject: [PATCH 09/57] refactor(select): use native button --- .../components/select/select.component.html | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index a7981784db..317bb6316f 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -1,16 +1,9 @@ - From 9fc9b46a3cbd10b7a2e9258b421ab18a0b402c72 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 10:32:17 +0300 Subject: [PATCH 11/57] refactor(select): use ngIfElse syntax --- src/framework/theme/components/select/select.component.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index 1ee0abdb66..6b217766ce 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -7,11 +7,11 @@ - + - {{ selectionView }} + {{ selectionView }} From 06a5454fb8e4f359f3e06126fd722e8a183ab996 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 11:33:45 +0300 Subject: [PATCH 12/57] refactor(option): change disabled class to attribute BREAKING CHANGE: NbOptionComponent and NbOptionGroupComponent 'disabledClass' getter renamed to 'disabledAttribute' --- .../select/option-group.component.scss | 8 ++++---- .../select/option-group.component.ts | 18 ++++++++++-------- .../components/select/option.component.scss | 8 ++++---- .../components/select/option.component.ts | 6 +++--- 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/framework/theme/components/select/option-group.component.scss b/src/framework/theme/components/select/option-group.component.scss index 44e4e363a8..86ea76b6c2 100644 --- a/src/framework/theme/components/select/option-group.component.scss +++ b/src/framework/theme/components/select/option-group.component.scss @@ -12,11 +12,11 @@ display: block; } - &.disabled { - pointer-events: none; - } - /deep/ nb-option { padding: 0.75rem 0.75rem 0.75rem 2.5rem; } } + +:host([disabled]) { + pointer-events: none; +} diff --git a/src/framework/theme/components/select/option-group.component.ts b/src/framework/theme/components/select/option-group.component.ts index 10d9fe9ec6..a85b68d103 100644 --- a/src/framework/theme/components/select/option-group.component.ts +++ b/src/framework/theme/components/select/option-group.component.ts @@ -20,16 +20,18 @@ import { convertToBoolProperty } from '../helpers'; export class NbOptionGroupComponent { @Input() title: string; - @Input('disabled') - set setDisabled(disabled: boolean) { - this.disabled = convertToBoolProperty(disabled); + @Input() + get disabled(): boolean { + return this._disabled; } + set disabled(value: boolean) { + this._disabled = convertToBoolProperty(value); + } + protected _disabled: boolean = false; - disabled: boolean = false; - - @HostBinding('class.disabled') - get disabledClass(): boolean { - return this.disabled; + @HostBinding('attr.disabled') + get disabledAttribute(): '' | null { + return this.disabled ? '' : null; } } diff --git a/src/framework/theme/components/select/option.component.scss b/src/framework/theme/components/select/option.component.scss index 3b45dc5d62..2749ac85b5 100644 --- a/src/framework/theme/components/select/option.component.scss +++ b/src/framework/theme/components/select/option.component.scss @@ -7,10 +7,6 @@ :host { display: block; - &.disabled { - pointer-events: none; - } - &:hover { cursor: pointer; } @@ -20,3 +16,7 @@ } } +:host([disabled]) { + pointer-events: none; +} + diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts index bc3ce49dbb..19aa2fdfb8 100644 --- a/src/framework/theme/components/select/option.component.ts +++ b/src/framework/theme/components/select/option.component.ts @@ -101,9 +101,9 @@ export class NbOptionComponent implements OnDestroy { return this.selected; } - @HostBinding('class.disabled') - get disabledClass(): boolean { - return this.disabled; + @HostBinding('attr.disabled') + get disabledAttribute(): '' | null { + return this.disabled ? '' : null; } @HostListener('click') From d7f024226d673ac61ca3e0c467cbdb9012ddee23 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 12:04:39 +0300 Subject: [PATCH 13/57] refactor(option): make fields protected --- src/framework/theme/components/select/option.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/option.component.ts b/src/framework/theme/components/select/option.component.ts index 19aa2fdfb8..da304e04e6 100644 --- a/src/framework/theme/components/select/option.component.ts +++ b/src/framework/theme/components/select/option.component.ts @@ -70,7 +70,7 @@ export class NbOptionComponent implements OnDestroy { } selected: boolean = false; - private alive: boolean = true; + protected alive: boolean = true; constructor(@Inject(forwardRef(() => NbSelectComponent)) protected parent, protected elementRef: ElementRef, @@ -119,7 +119,7 @@ export class NbOptionComponent implements OnDestroy { this.setSelection(false); } - private setSelection(selected: boolean): void { + protected setSelection(selected: boolean): void { /** * In case of changing options in runtime the reference to the selected option will be kept in select component. * This may lead to exceptions with detecting changes in destroyed component. From 199e7d90b2e70df441c448e07bfc95a4148f06be Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 12:06:19 +0300 Subject: [PATCH 14/57] feat(select): add size, shape and status class bindings --- .../components/select/select.component.ts | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 9ff774d79b..f6bba9aa79 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -661,4 +661,57 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent protected isClickedWithinComponent($event: Event) { return this.hostRef.nativeElement === $event.target || this.hostRef.nativeElement.contains($event.target as Node); } + + @HostBinding('class.size-tiny') + get tiny(): boolean { + return this.size === 'tiny'; + } + @HostBinding('class.size-small') + get small(): boolean { + return this.size === 'small'; + } + @HostBinding('class.size-medium') + get medium(): boolean { + return this.size === 'medium'; + } + @HostBinding('class.size-large') + get large(): boolean { + return this.size === 'large'; + } + @HostBinding('class.size-giant') + get giant(): boolean { + return this.size === 'giant'; + } + @HostBinding('class.status-primary') + get primary(): boolean { + return this.status === 'primary'; + } + @HostBinding('class.status-info') + get info(): boolean { + return this.status === 'info'; + } + @HostBinding('class.status-success') + get success(): boolean { + return this.status === 'success'; + } + @HostBinding('class.status-warning') + get warning(): boolean { + return this.status === 'warning'; + } + @HostBinding('class.status-danger') + get danger(): boolean { + return this.status === 'danger'; + } + @HostBinding('class.shape-rectangle') + get rectangle(): boolean { + return this.shape === 'rectangle'; + } + @HostBinding('class.shape-round') + get round(): boolean { + return this.shape === 'round'; + } + @HostBinding('class.shape-semi-round') + get semiRound(): boolean { + return this.shape === 'semi-round'; + } } From d7d0d1fec0980c5e140b7abc5abff05fda18dd27 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 15:08:00 +0300 Subject: [PATCH 15/57] refactor(select): use ngIfElse syntax --- .../theme/components/select/select.component.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index 6b217766ce..a8790ba782 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -5,17 +5,15 @@ class="select-button" type="button"> - - - + + - {{ selectionView }} - + {{ selectionView }} - {{ placeholder }} + {{ placeholder }} From dc6992882e9c0661e455e317f4676800b10c302a Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 15 Apr 2019 15:12:24 +0300 Subject: [PATCH 16/57] fix(select): update button selector --- src/framework/theme/components/select/select.component.html | 3 ++- src/framework/theme/components/select/select.component.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index a8790ba782..9a406aaa6b 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -3,7 +3,8 @@ [ngClass]="overlayPosition" (blur)="trySetTouched()" class="select-button" - type="button"> + type="button" + #selectButton> diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index f6bba9aa79..8daaf473a2 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -297,7 +297,7 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent * */ @ViewChild(NbPortalDirective) portal: NbPortalDirective; - @ViewChild(NbButtonComponent, { read: ElementRef }) button: ElementRef; + @ViewChild('selectButton', { read: ElementRef }) button: ElementRef; /** * Determines is select opened. From dc83f3961e1699100c97a5e8ba80ae278dcec4b8 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 15:29:43 +0300 Subject: [PATCH 17/57] docs(select): wrap examples into card --- .../select/select-clean.component.html | 18 ++++-- .../select/select-clean.component.ts | 12 ---- .../select/select-disabled.component.html | 59 ++++++++--------- .../select/select-disabled.component.ts | 7 -- .../select/select-form.component.html | 28 ++++---- .../select/select-form.component.ts | 7 -- .../select/select-groups.component.html | 44 +++++++------ .../select/select-groups.component.ts | 12 ---- .../select/select-hero.component.html | 64 ++++++++++--------- .../select/select-hero.component.ts | 7 -- .../select/select-label.component.html | 22 ++++--- .../select/select-label.component.ts | 12 ---- .../select/select-multiple.component.html | 16 +++-- .../select/select-multiple.component.ts | 7 -- .../select/select-outline.component.html | 64 ++++++++++--------- .../select/select-outline.component.ts | 7 -- .../select/select-placeholder.component.html | 16 +++-- .../select/select-placeholder.component.ts | 12 ---- .../select/select-shapes.component.html | 40 ++++++------ .../select/select-shapes.component.ts | 7 -- .../select/select-showcase.component.html | 17 +++-- .../select/select-showcase.component.ts | 7 -- .../select/select-sizes.component.html | 52 ++++++++------- .../select/select-sizes.component.ts | 7 -- .../select/select-status.component.html | 64 ++++++++++--------- .../select/select-status.component.ts | 7 -- .../with-layout/select/select.module.ts | 5 +- 27 files changed, 276 insertions(+), 344 deletions(-) diff --git a/src/playground/with-layout/select/select-clean.component.html b/src/playground/with-layout/select/select-clean.component.html index 7552737e1d..2add736c8f 100644 --- a/src/playground/with-layout/select/select-clean.component.html +++ b/src/playground/with-layout/select/select-clean.component.html @@ -1,7 +1,11 @@ - - Clean - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Clean + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-clean.component.ts b/src/playground/with-layout/select/select-clean.component.ts index 94c5cd058c..2b9f53a1d2 100644 --- a/src/playground/with-layout/select/select-clean.component.ts +++ b/src/playground/with-layout/select/select-clean.component.ts @@ -9,18 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-clean', templateUrl: './select-clean.component.html', - styles: [` - nb-select { - margin-right: 0.75rem; - margin-bottom: 1rem; - } - - :host { - display: block; - width: 15rem; - height: 20rem; - } - `], }) export class SelectCleanComponent { } diff --git a/src/playground/with-layout/select/select-disabled.component.html b/src/playground/with-layout/select/select-disabled.component.html index a5d0776994..485a7e00fd 100644 --- a/src/playground/with-layout/select/select-disabled.component.html +++ b/src/playground/with-layout/select/select-disabled.component.html @@ -1,38 +1,31 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + - - Option 21 - Option 22 - Option 23 - Option 24 - + + Option 21 + Option 22 + - - Option 31 - Option 32 - Option 33 - Option 34 - - - + + + diff --git a/src/playground/with-layout/select/select-disabled.component.ts b/src/playground/with-layout/select/select-disabled.component.ts index a4d5a8aa32..5561841c20 100644 --- a/src/playground/with-layout/select/select-disabled.component.ts +++ b/src/playground/with-layout/select/select-disabled.component.ts @@ -11,15 +11,8 @@ import { Component } from '@angular/core'; templateUrl: './select-disabled.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 35rem; - } `], }) export class SelectDisabledComponent { diff --git a/src/playground/with-layout/select/select-form.component.html b/src/playground/with-layout/select/select-form.component.html index 7153f22fb0..7af97b0d26 100644 --- a/src/playground/with-layout/select/select-form.component.html +++ b/src/playground/with-layout/select/select-form.component.html @@ -1,13 +1,17 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-form.component.ts b/src/playground/with-layout/select/select-form.component.ts index b25bafbc1c..1a23fec02d 100644 --- a/src/playground/with-layout/select/select-form.component.ts +++ b/src/playground/with-layout/select/select-form.component.ts @@ -12,15 +12,8 @@ import { FormControl } from '@angular/forms'; templateUrl: './select-form.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 20rem; - } `], }) export class SelectFormComponent { diff --git a/src/playground/with-layout/select/select-groups.component.html b/src/playground/with-layout/select/select-groups.component.html index ec29b8250c..7f2f67b86a 100644 --- a/src/playground/with-layout/select/select-groups.component.html +++ b/src/playground/with-layout/select/select-groups.component.html @@ -1,24 +1,28 @@ - + + + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 21 - Option 22 - Option 23 - Option 24 - + + Option 21 + Option 22 + Option 23 + Option 24 + - - Option 31 - Option 32 - Option 33 - Option 34 - + + Option 31 + Option 32 + Option 33 + Option 34 + - + + + diff --git a/src/playground/with-layout/select/select-groups.component.ts b/src/playground/with-layout/select/select-groups.component.ts index c1589f6126..a7bd4b8a55 100644 --- a/src/playground/with-layout/select/select-groups.component.ts +++ b/src/playground/with-layout/select/select-groups.component.ts @@ -9,18 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-groups', templateUrl: './select-groups.component.html', - styles: [` - nb-select { - margin-right: 0.75rem; - margin-bottom: 1rem; - } - - :host { - display: block; - width: 15rem; - height: 25rem; - } - `], }) export class SelectGroupsComponent { } diff --git a/src/playground/with-layout/select/select-hero.component.html b/src/playground/with-layout/select/select-hero.component.html index 221c2a585f..834b90fa19 100644 --- a/src/playground/with-layout/select/select-hero.component.html +++ b/src/playground/with-layout/select/select-hero.component.html @@ -1,34 +1,38 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-hero.component.ts b/src/playground/with-layout/select/select-hero.component.ts index 6adb37ba38..09a66a844d 100644 --- a/src/playground/with-layout/select/select-hero.component.ts +++ b/src/playground/with-layout/select/select-hero.component.ts @@ -11,15 +11,8 @@ import { Component } from '@angular/core'; templateUrl: './select-hero.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 35rem; - } `], }) export class SelectHeroComponent { diff --git a/src/playground/with-layout/select/select-label.component.html b/src/playground/with-layout/select/select-label.component.html index 64fe975f7c..409d757a98 100644 --- a/src/playground/with-layout/select/select-label.component.html +++ b/src/playground/with-layout/select/select-label.component.html @@ -1,10 +1,14 @@ - - - Selected: {{ selectedItem }} - + + + + + Selected: {{ selectedItem }} + - Option 1 - Option 2 - Option 3 - Option 4 - + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-label.component.ts b/src/playground/with-layout/select/select-label.component.ts index 311ff09029..69ab6c646c 100644 --- a/src/playground/with-layout/select/select-label.component.ts +++ b/src/playground/with-layout/select/select-label.component.ts @@ -9,18 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-label-showcase', templateUrl: './select-label.component.html', - styles: [` - nb-select { - margin-right: 0.75rem; - margin-bottom: 1rem; - } - - :host { - display: block; - width: 15rem; - height: 15rem; - } - `], }) export class SelectLabelShowcaseComponent { selectedItem; diff --git a/src/playground/with-layout/select/select-multiple.component.html b/src/playground/with-layout/select/select-multiple.component.html index 7f2966ab94..d203b12140 100644 --- a/src/playground/with-layout/select/select-multiple.component.html +++ b/src/playground/with-layout/select/select-multiple.component.html @@ -1,6 +1,10 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-multiple.component.ts b/src/playground/with-layout/select/select-multiple.component.ts index e8af719fb5..417d826e57 100644 --- a/src/playground/with-layout/select/select-multiple.component.ts +++ b/src/playground/with-layout/select/select-multiple.component.ts @@ -9,13 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-multiple', templateUrl: './select-multiple.component.html', - styles: [` - :host { - display: block; - width: 15rem; - height: 20rem; - } - `], }) export class SelectMultipleComponent { diff --git a/src/playground/with-layout/select/select-outline.component.html b/src/playground/with-layout/select/select-outline.component.html index 4e1c67d755..b1a7a1c5e9 100644 --- a/src/playground/with-layout/select/select-outline.component.html +++ b/src/playground/with-layout/select/select-outline.component.html @@ -1,34 +1,38 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-outline.component.ts b/src/playground/with-layout/select/select-outline.component.ts index a116704de7..1c74188ee8 100644 --- a/src/playground/with-layout/select/select-outline.component.ts +++ b/src/playground/with-layout/select/select-outline.component.ts @@ -11,15 +11,8 @@ import { Component } from '@angular/core'; templateUrl: './select-outline.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 30rem; - } `], }) export class SelectOutlineComponent { diff --git a/src/playground/with-layout/select/select-placeholder.component.html b/src/playground/with-layout/select/select-placeholder.component.html index 79772f72bb..7acd46a6d3 100644 --- a/src/playground/with-layout/select/select-placeholder.component.html +++ b/src/playground/with-layout/select/select-placeholder.component.html @@ -1,6 +1,10 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-placeholder.component.ts b/src/playground/with-layout/select/select-placeholder.component.ts index c4fe062e0f..d5435c061d 100644 --- a/src/playground/with-layout/select/select-placeholder.component.ts +++ b/src/playground/with-layout/select/select-placeholder.component.ts @@ -9,18 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-placeholder', templateUrl: './select-placeholder.component.html', - styles: [` - nb-select { - margin-right: 0.75rem; - margin-bottom: 1rem; - } - - :host { - display: block; - width: 15rem; - height: 15rem; - } - `], }) export class SelectPlaceholderComponent { } diff --git a/src/playground/with-layout/select/select-shapes.component.html b/src/playground/with-layout/select/select-shapes.component.html index e439c8090c..1c5a0d8479 100644 --- a/src/playground/with-layout/select/select-shapes.component.html +++ b/src/playground/with-layout/select/select-shapes.component.html @@ -1,20 +1,24 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-shapes.component.ts b/src/playground/with-layout/select/select-shapes.component.ts index afa4581f75..0b0315496f 100644 --- a/src/playground/with-layout/select/select-shapes.component.ts +++ b/src/playground/with-layout/select/select-shapes.component.ts @@ -11,15 +11,8 @@ import { Component } from '@angular/core'; templateUrl: './select-shapes.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 35rem; - } `], }) export class SelectShapeComponent { diff --git a/src/playground/with-layout/select/select-showcase.component.html b/src/playground/with-layout/select/select-showcase.component.html index bdae8073a7..48bfb9e73a 100644 --- a/src/playground/with-layout/select/select-showcase.component.html +++ b/src/playground/with-layout/select/select-showcase.component.html @@ -1,7 +1,10 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - - + + + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-showcase.component.ts b/src/playground/with-layout/select/select-showcase.component.ts index 868c151b02..2a3686835d 100644 --- a/src/playground/with-layout/select/select-showcase.component.ts +++ b/src/playground/with-layout/select/select-showcase.component.ts @@ -9,13 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-showcase', templateUrl: './select-showcase.component.html', - styles: [` - :host { - display: block; - width: 15rem; - height: 15rem; - } - `], }) export class SelectShowcaseComponent { diff --git a/src/playground/with-layout/select/select-sizes.component.html b/src/playground/with-layout/select/select-sizes.component.html index 7cad630963..8359ba6e00 100644 --- a/src/playground/with-layout/select/select-sizes.component.html +++ b/src/playground/with-layout/select/select-sizes.component.html @@ -1,27 +1,31 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-sizes.component.ts b/src/playground/with-layout/select/select-sizes.component.ts index 9f05da1aa3..09172db7da 100644 --- a/src/playground/with-layout/select/select-sizes.component.ts +++ b/src/playground/with-layout/select/select-sizes.component.ts @@ -11,15 +11,8 @@ import { Component } from '@angular/core'; templateUrl: './select-sizes.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 30rem; - } `], }) export class SelectSizesComponent { diff --git a/src/playground/with-layout/select/select-status.component.html b/src/playground/with-layout/select/select-status.component.html index c790c5c805..bb71d95ff5 100644 --- a/src/playground/with-layout/select/select-status.component.html +++ b/src/playground/with-layout/select/select-status.component.html @@ -1,34 +1,38 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - + + + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + - - Option 1 - Option 2 - Option 3 - Option 4 - + + Option 1 + Option 2 + Option 3 + Option 4 + + + diff --git a/src/playground/with-layout/select/select-status.component.ts b/src/playground/with-layout/select/select-status.component.ts index 1ea9112407..f14d13dcf3 100644 --- a/src/playground/with-layout/select/select-status.component.ts +++ b/src/playground/with-layout/select/select-status.component.ts @@ -11,15 +11,8 @@ import { Component } from '@angular/core'; templateUrl: './select-status.component.html', styles: [` nb-select { - margin-right: 0.75rem; margin-bottom: 1rem; } - - :host { - display: block; - width: 15rem; - height: 30rem; - } `], }) export class SelectStatusComponent { diff --git a/src/playground/with-layout/select/select.module.ts b/src/playground/with-layout/select/select.module.ts index 58ecebada1..d183c6dc69 100644 --- a/src/playground/with-layout/select/select.module.ts +++ b/src/playground/with-layout/select/select.module.ts @@ -4,9 +4,10 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { NbSelectModule } from '@nebular/theme'; +import { NbCardModule, NbSelectModule } from '@nebular/theme'; import { SelectRoutingModule } from './select-routing.module'; import { SelectCleanComponent } from './select-clean.component'; import { SelectDisabledComponent } from './select-disabled.component'; @@ -43,6 +44,8 @@ import { SelectStatusComponent } from './select-status.component'; ReactiveFormsModule, NbSelectModule, SelectRoutingModule, + NbCardModule, + CommonModule, ], }) export class SelectModule {} From a625c633fa977b9b26a46eba674c9255ba947c6c Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 15:49:18 +0300 Subject: [PATCH 18/57] docs(select): add all combinations --- src/app/playground-components.ts | 6 +++ .../select/select-combinations.component.html | 45 +++++++++++++++++++ .../select/select-combinations.component.scss | 15 +++++++ .../select/select-combinations.component.ts | 23 ++++++++++ .../select/select-routing.module.ts | 5 +++ .../with-layout/select/select.module.ts | 2 + 6 files changed, 96 insertions(+) create mode 100644 src/playground/with-layout/select/select-combinations.component.html create mode 100644 src/playground/with-layout/select/select-combinations.component.scss create mode 100644 src/playground/with-layout/select/select-combinations.component.ts diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 27ea83e6ab..992b648557 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -930,6 +930,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ component: 'SelectStatusComponent', name: 'Select Status', }, + { + path: 'select-combinations.component', + link: '/select/select-combinations.component', + component: 'SelectCombinationsComponent', + name: 'Select Combinations', + }, ], }, { diff --git a/src/playground/with-layout/select/select-combinations.component.html b/src/playground/with-layout/select/select-combinations.component.html new file mode 100644 index 0000000000..66dc80bd30 --- /dev/null +++ b/src/playground/with-layout/select/select-combinations.component.html @@ -0,0 +1,45 @@ + + + + Reset value + Option 1 + Option 2 + Option 3 (disabled) + Option 4 + + Option 5 + Option 6 + + + Option 7 + Option 8 + + + + + Reset + Option 1 + Option 2 + Option 3 (disabled) + Option 4 + + Option 5 + Option 6 + + + Option 7 + Option 8 + + + + + + + Option 1 + + + diff --git a/src/playground/with-layout/select/select-combinations.component.scss b/src/playground/with-layout/select/select-combinations.component.scss new file mode 100644 index 0000000000..3ec463aa63 --- /dev/null +++ b/src/playground/with-layout/select/select-combinations.component.scss @@ -0,0 +1,15 @@ +:host { + display: flex; + flex-wrap: wrap; + margin: -0.5rem; +} + +nb-card { + flex: 1 0 auto; + margin: 0.5rem; +} + +nb-select { + margin: 1rem 0; +} + diff --git a/src/playground/with-layout/select/select-combinations.component.ts b/src/playground/with-layout/select/select-combinations.component.ts new file mode 100644 index 0000000000..a2bc51caa2 --- /dev/null +++ b/src/playground/with-layout/select/select-combinations.component.ts @@ -0,0 +1,23 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { Component } from '@angular/core'; +import { NbComponentStatus } from '@nebular/theme'; +import { NbSelectAppearance } from '@nebular/theme/components/select/select.component'; + +type EmptyOrStatus = '' | NbComponentStatus; + +@Component({ + selector: 'nb-select-interactive', + templateUrl: './select-combinations.component.html', + styleUrls: ['./select-combinations.component.scss'], +}) +export class SelectCombinationsComponent { + singleSelectValue = '1'; + multipleSelectValue = [ '1' ]; + statuses: EmptyOrStatus[] = [ '', 'primary', 'success', 'info', 'warning', 'danger' ]; + appearances: NbSelectAppearance[] = [ 'outline', 'filled', 'hero' ]; +} diff --git a/src/playground/with-layout/select/select-routing.module.ts b/src/playground/with-layout/select/select-routing.module.ts index cd5b5b3ef8..165adf843f 100644 --- a/src/playground/with-layout/select/select-routing.module.ts +++ b/src/playground/with-layout/select/select-routing.module.ts @@ -19,6 +19,7 @@ import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; import { SelectSizesComponent } from './select-sizes.component'; import { SelectStatusComponent } from './select-status.component'; +import { SelectCombinationsComponent } from 'playground/with-layout/select/select-combinations.component'; const routes: Route[] = [ { @@ -73,6 +74,10 @@ const routes: Route[] = [ path: 'select-status.component', component: SelectStatusComponent, }, + { + path: 'select-combinations.component', + component: SelectCombinationsComponent, + }, ]; @NgModule({ diff --git a/src/playground/with-layout/select/select.module.ts b/src/playground/with-layout/select/select.module.ts index d183c6dc69..7e46f9eb22 100644 --- a/src/playground/with-layout/select/select.module.ts +++ b/src/playground/with-layout/select/select.module.ts @@ -22,6 +22,7 @@ import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; import { SelectSizesComponent } from './select-sizes.component'; import { SelectStatusComponent } from './select-status.component'; +import { SelectCombinationsComponent } from './select-combinations.component'; @NgModule({ declarations: [ @@ -38,6 +39,7 @@ import { SelectStatusComponent } from './select-status.component'; SelectShowcaseComponent, SelectSizesComponent, SelectStatusComponent, + SelectCombinationsComponent, ], imports: [ FormsModule, From 584636171b6f7f13876cf37be83b23f0318ee560 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 16:55:43 +0300 Subject: [PATCH 19/57] feat(select): add Eva outline and filled style BREAKING CHANGE: Following theme properties were renamed: select-border-width -> select-[appearance]-border-width select-max-height -> select-options-list-max-height select-bg -> select-[appearance]-background-color select-option-disabled-bg -> select-option-[appearance]-disabled-background-color select-option-padding -> select-option-[appearance]-[size]-padding Following theme properties removed: select-checkmark-color select-checkbox-color select-option-disabled-opacity --- .../components/select/_select-filled.scss | 112 +++++++++ .../components/select/_select-outline.scss | 78 ++++++ .../select/_select.component.theme.scss | 116 +++++---- .../select/option-group.component.scss | 8 +- .../select/option-group.component.ts | 2 +- .../components/select/select.component.html | 11 +- .../components/select/select.component.scss | 55 +++-- .../theme/styles/themes/_default.scss | 233 +++++++++++++++++- 8 files changed, 510 insertions(+), 105 deletions(-) create mode 100644 src/framework/theme/components/select/_select-filled.scss create mode 100644 src/framework/theme/components/select/_select-outline.scss diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss new file mode 100644 index 0000000000..6ccd998235 --- /dev/null +++ b/src/framework/theme/components/select/_select-filled.scss @@ -0,0 +1,112 @@ +@mixin select-filled { + nb-select.appearance-filled .select-button { + background-color: nb-theme(select-filled-background-color); + border-color: nb-theme(select-filled-border-color); + border-style: nb-theme(select-filled-border-style); + border-width: nb-theme(select-filled-border-width); + color: nb-theme(select-filled-text-color); + + &.placeholder { + color: nb-theme(select-filled-placeholder-text-color); + } + + &:focus { + border-color: nb-theme(select-filled-focus-border-color); + } + &:hover { + background-color: nb-theme(select-filled-hover-background-color); + border-color: nb-theme(select-filled-hover-border-color); + } + &[disabled] { + color: nb-theme(select-filled-disabled-text-color); + background-color: nb-theme(select-filled-disabled-background-color); + border-color: nb-theme(select-filled-disabled-border-color); + } + } + + @each $size in nb-get-sizes() { + nb-select.appearance-filled.size-#{$size} .select-button { + padding: nb-theme(select-filled-#{$size}-padding); + } + .appearance-filled.size-#{$size} { + nb-option-group .option-group-title, + nb-option { + padding: nb-theme(select-option-filled-#{$size}-padding); + } + nb-option-group nb-option { + padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding); + } + } + } + + .appearance-filled nb-option-group, + .appearance-filled nb-option { + background-color: nb-theme(select-option-filled-background-color); + color: nb-theme(select-option-filled-text-color); + + &[disabled] { + background-color: nb-theme(select-option-filled-disabled-background-color); + color: nb-theme(select-option-filled-disabled-text-color); + } + } + + .appearance-filled nb-option { + &.selected { + background-color: nb-theme(select-option-filled-selected-background-color); + } + &:focus { + background-color: nb-theme(select-option-filled-focus-background-color); + } + &:hover { + background-color: nb-theme(select-option-filled-hover-background-color); + } + } + + @each $status in nb-get-statuses() { + nb-select.appearance-filled.status-#{$status} .select-button { + background-color: nb-theme(select-filled-#{$status}-background-color); + border-color: nb-theme(select-filled-#{$status}-border-color); + color: nb-theme(select-filled-#{$status}-text-color); + + &.placeholder { + color: nb-theme(select-filled-primary-placeholder-text-color); + } + + &:focus { + background-color: nb-theme(select-filled-#{$status}-focus-background-color); + border-color: nb-theme(select-filled-#{$status}-focus-border-color); + } + &:hover { + background-color: nb-theme(select-filled-#{$status}-hover-background-color); + border-color: nb-theme(select-filled-#{$status}-hover-border-color); + } + &[disabled] { + background-color: nb-theme(select-filled-#{$status}-disabled-background-color); + border-color: nb-theme(select-filled-#{$status}-disabled-border-color); + } + } + + .appearance-filled.status-#{$status} nb-option-group, + .appearance-filled.status-#{$status} nb-option { + background-color: nb-theme(select-option-filled-#{$status}-background-color); + color: nb-theme(select-option-filled-#{$status}-text-color); + + &[disabled] { + background-color: nb-theme(select-option-filled-#{$status}-disabled-background-color); + color: nb-theme(select-option-filled-#{$status}-disabled-text-color); + } + } + + .appearance-filled.status-#{$status} nb-option { + &.selected { + background-color: nb-theme(select-option-filled-#{$status}-selected-background-color); + } + &:focus { + background-color: nb-theme(select-option-filled-#{$status}-focus-background-color); + } + &:hover { + background-color: nb-theme(select-option-filled-#{$status}-hover-background-color); + } + } + } +} diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss new file mode 100644 index 0000000000..7beb9b2399 --- /dev/null +++ b/src/framework/theme/components/select/_select-outline.scss @@ -0,0 +1,78 @@ +@mixin select-outline { + nb-select.appearance-outline .select-button { + background-color: nb-theme(select-outline-background-color); + border-color: nb-theme(select-outline-border-color); + border-style: nb-theme(select-outline-border-style); + border-width: nb-theme(select-outline-border-width); + color: nb-theme(select-outline-text-color); + + &.placeholder { + color: nb-theme(select-outline-placeholder-text-color); + } + + &:focus { + border-color: nb-theme(select-outline-focus-border-color); + } + &:hover { + border-color: nb-theme(select-outline-hover-border-color); + } + &[disabled] { + color: nb-theme(select-outline-disabled-text-color); + background-color: nb-theme(select-outline-disabled-background-color); + border-color: nb-theme(select-outline-disabled-border-color); + } + } + + @each $status in nb-get-statuses() { + nb-select.appearance-outline.status-#{$status} .select-button { + border-color: nb-theme(select-outline-#{$status}-border-color); + &.selected { + background-color: nb-theme(select-option-outline-#{$status}-selected-background-color); + } + &:focus { + border-color: nb-theme(select-outline-#{$status}-focus-border-color); + } + &:hover { + border-color: nb-theme(select-outline-#{$status}-hover-border-color); + } + } + } + + @each $size in nb-get-sizes() { + nb-select.appearance-outline.size-#{$size} .select-button { + padding: nb-theme(select-outline-#{$size}-padding); + } + .appearance-outline.size-#{$size} { + nb-option-group .option-group-title, + nb-option { + padding: nb-theme(select-option-outline-#{$size}-padding); + } + nb-option-group nb-option { + padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding); + } + } + } + + .appearance-outline nb-option-group, + .appearance-outline nb-option { + background-color: nb-theme(select-option-outline-background-color); + color: nb-theme(select-option-outline-text-color); + + &[disabled] { + background-color: nb-theme(select-option-outline-disabled-background-color); + color: nb-theme(select-option-outline-disabled-text-color); + } + } + + .appearance-outline nb-option { + &.selected { + background-color: nb-theme(select-option-outline-selected-background-color); + } + &:focus { + background-color: nb-theme(select-option-outline-focus-background-color); + } + &:hover { + background-color: nb-theme(select-option-outline-hover-background-color); + } + } +} diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 45c842f027..160b5414cc 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -4,91 +4,85 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-select-status($status) { - border: nb-theme(select-border-width) solid nb-theme(color-#{$status}); - - nb-option { - &:hover, &.selected { - background-color: nb-theme(color-#{$status}); - color: nb-theme(color-white); - } - } -} +@import './select-outline'; +@import './select-filled'; @mixin nb-select-theme() { - nb-select > button[nbButton] { - transition: all 0.1s; - - &::after { - @include nb-rtl(left, 0.75rem); - @include nb-rtl(right, auto); - } + nb-select { + .select-button { + cursor: nb-theme(select-cursor); - &.opened { - &.top { - border-top-left-radius: 0; - border-top-right-radius: 0; + &:focus { + box-shadow: 0 0 0 nb-theme(select-outline-width) nb-theme(select-outline-color); + outline: none; } - - &.bottom { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + &[disabled] { + cursor: nb-theme(select-disabled-cursor); } } } - nb-card.select { - background-color: nb-theme(select-bg); - max-height: nb-theme(select-max-height); - margin-bottom: 0; - box-shadow: none; + .options-list-container { + overflow: hidden; - nb-card-body { + & > .options-list { + margin: 0; padding: 0; } + } - nb-option { - padding: nb-theme(select-option-padding); - user-select: none; - } - - &.primary { - @include nb-select-status(primary); - } + .options-list { + max-height: nb-theme(select-options-list-max-height); + height: 100%; + overflow: auto; + } - &.danger { - @include nb-select-status(danger); - } + nb-option { + user-select: none; - &.warning { - @include nb-select-status(warning); + &:focus { + outline: none; } + } - &.info { - @include nb-select-status(info); - } + nb-select .select-button, + nb-option, + nb-option-group { + font-family: nb-theme(select-text-font-family); + font-weight: nb-theme(select-text-font-weight); + } - &.success { - @include nb-select-status(success); - } + nb-select .placeholder { + font-weight: nb-theme(select-placeholder-text-font-weight); + } - &.bottom { - border-top-left-radius: 0; - border-top-right-radius: 0; + @each $size in nb-get-sizes() { + nb-select.size-#{$size} .select-button, + .size-#{$size} nb-option { + font-size: nb-theme(select-#{$size}-text-font-size); + line-height: nb-theme(select-#{$size}-text-line-height); } + } - &.top { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + @each $shape in nb-get-shapes() { + nb-select.shape-#{$shape} .select-button { + border-radius: nb-theme(select-#{$shape}-border-radius); } - nb-checkbox { - .text { - color: inherit; + .options-list-container.shape-#{$shape} { + &.bottom { + border-bottom-left-radius: nb-theme(select-#{$shape}-border-radius); + border-bottom-right-radius: nb-theme(select-#{$shape}-border-radius); } + &.top { + border-top-left-radius: nb-theme(select-#{$shape}-border-radius); + border-top-right-radius: nb-theme(select-#{$shape}-border-radius); + } + } + } - .native-input:checked + .custom-checkbox { - border-color: nb-theme(select-checkbox-color); + @include select-outline; + @include select-filled; nb-icon { color: nb-theme(select-checkmark-color); diff --git a/src/framework/theme/components/select/option-group.component.scss b/src/framework/theme/components/select/option-group.component.scss index 86ea76b6c2..4580ff13a5 100644 --- a/src/framework/theme/components/select/option-group.component.scss +++ b/src/framework/theme/components/select/option-group.component.scss @@ -6,11 +6,11 @@ :host { display: block; +} - span { - padding: 1.125rem 0.5rem; - display: block; - } +.option-group-title { + display: block; +} /deep/ nb-option { padding: 0.75rem 0.75rem 0.75rem 2.5rem; diff --git a/src/framework/theme/components/select/option-group.component.ts b/src/framework/theme/components/select/option-group.component.ts index a85b68d103..6dea67e246 100644 --- a/src/framework/theme/components/select/option-group.component.ts +++ b/src/framework/theme/components/select/option-group.component.ts @@ -13,7 +13,7 @@ import { convertToBoolProperty } from '../helpers'; styleUrls: ['./option-group.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` - {{ title }} + {{ title }} `, }) diff --git a/src/framework/theme/components/select/select.component.html b/src/framework/theme/components/select/select.component.html index 9a406aaa6b..3c2472d60b 100644 --- a/src/framework/theme/components/select/select.component.html +++ b/src/framework/theme/components/select/select.component.html @@ -1,6 +1,5 @@ - - +
+
    - - +
+
diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index 2e41ab0d11..a7e3c83cfb 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -4,32 +4,41 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@import '../../styles/core/mixins'; + :host { display: block; - button { - position: relative; - width: 100%; - text-align: start; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - border: none; + .select-button.bottom { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } - - button::after { - top: 50%; - right: 0.75rem; - position: absolute; - display: inline-block; - width: 0; - height: 0; - margin-left: 0.255em; - vertical-align: 0.255em; - content: ''; - border-top: 0.3em solid; - border-right: 0.3em solid transparent; - border-bottom: 0; - border-left: 0.3em solid transparent; + .select-button.top { + border-top-left-radius: 0; + border-top-right-radius: 0; } } + +.select-button { + position: relative; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-transform: none; + + @include nb-component-animation(border-color, border-radius, background-color, color); +} + +nb-icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + @include nb-ltr(right, 0.5rem); + @include nb-rtl(left, 0.5rem); + @include nb-component-animation(transform); +} + +.select-button.open nb-icon { + transform: translateY(-50%) rotate(180deg); +} diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index f7aa09d79f..17acddddf0 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1363,16 +1363,229 @@ $theme: ( tooltip-danger-text-color: text-light-color, tooltip-shadow: none, - select-border-width: 2px, - select-max-height: 20rem, - select-bg: color-bg, - - select-checkbox-color: input-border-color, - select-checkmark-color: input-border-color, - - select-option-disabled-bg: #f2f4f7, - select-option-disabled-opacity: 0.3, - select-option-padding: 0.75rem 1.5rem, + select-cursor: pointer, + select-disabled-cursor: default, + select-options-list-max-height: 20rem, + select-outline-width: outline-width, + select-outline-color: outline-color, + + select-text-font-family: text-subtitle-font-family, + select-text-font-weight: text-subtitle-font-weight, + select-placeholder-text-font-weight: text-paragraph-font-weight, + + select-tiny-text-font-size: text-button-tiny-font-size, + select-tiny-text-line-height: text-button-tiny-line-height, + select-small-text-font-size: text-button-small-font-size, + select-small-text-line-height: text-button-small-line-height, + select-medium-text-font-size: text-button-medium-font-size, + select-medium-text-line-height: text-button-medium-line-height, + select-large-text-font-size: text-button-large-font-size, + select-large-text-line-height: text-button-large-line-height, + select-giant-text-font-size: text-button-giant-font-size, + select-giant-text-line-height: text-button-giant-line-height, + + select-rectangle-border-radius: 0.25rem, + select-semi-round-border-radius: 0.75rem, + select-round-border-radius: 1.5rem, + + select-outline-background-color: color-basic-100, + select-outline-border-color: color-basic-100, + select-outline-border-style: solid, + select-outline-border-width: 0.125rem, + select-outline-text-color: text-dark-color, + select-outline-placeholder-text-color: color-basic-600, + + select-outline-focus-border-color: color-primary-focus, + select-outline-hover-border-color: color-primary-hover, + select-outline-disabled-border-color: color-basic-disabled, + select-outline-disabled-background-color: color-basic-disabled, + select-outline-disabled-text-color: text-disabled-color, + + select-outline-tiny-padding: 0.25rem 0.625rem, + select-outline-small-padding: 0.375rem 0.875rem, + select-outline-medium-padding: 0.625rem 1.125rem, + select-outline-large-padding: 0.75rem 1.125rem, + select-outline-giant-padding: 0.875rem 1.375rem, + + select-outline-primary-border-color: color-primary, + select-outline-primary-focus-border-color: color-primary-focus, + select-outline-primary-hover-border-color: color-primary-hover, + + select-outline-success-border-color: color-success, + select-outline-success-focus-border-color: color-success-focus, + select-outline-success-hover-border-color: color-success-hover, + + select-outline-info-border-color: color-info, + select-outline-info-focus-border-color: color-info-focus, + select-outline-info-hover-border-color: color-info-hover, + + select-outline-warning-border-color: color-warning, + select-outline-warning-focus-border-color: color-warning-focus, + select-outline-warning-hover-border-color: color-warning-hover, + + select-outline-danger-border-color: color-danger, + select-outline-danger-focus-border-color: color-danger-focus, + select-outline-danger-hover-border-color: color-danger-hover, + + select-option-outline-background-color: color-basic-100, + select-option-outline-text-color: text-dark-color, + + select-option-outline-tiny-padding: select-outline-tiny-padding, + select-group-option-outline-tiny-start-padding: 1.25rem, + select-option-outline-small-padding: select-outline-small-padding, + select-group-option-outline-small-start-padding: 1.75rem, + select-option-outline-medium-padding: select-outline-medium-padding, + select-group-option-outline-medium-start-padding: 2.25rem, + select-option-outline-large-padding: select-outline-large-padding, + select-group-option-outline-large-start-padding: 2.25rem, + select-option-outline-giant-padding: select-outline-giant-padding, + select-group-option-outline-giant-start-padding: 2.75rem, + + select-option-outline-selected-background-color: color-basic-active, + select-option-outline-focus-background-color: color-basic-focus, + select-option-outline-hover-background-color: color-basic-hover, + select-option-outline-disabled-background-color: color-basic-disabled, + select-option-outline-disabled-text-color: text-disabled-color, + + select-filled-background-color: color-basic-100, + select-filled-border-color: color-basic-100, + select-filled-border-style: solid, + select-filled-border-width: 0.125rem, + select-filled-text-color: text-dark-color, + select-filled-placeholder-text-color: text-dark-color, + + select-filled-focus-border-color: color-basic-focus, + select-filled-hover-background-color: color-basic-hover, + select-filled-hover-border-color: color-basic-hover, + select-filled-disabled-background-color: color-basic-disabled, + select-filled-disabled-border-color: color-basic-disabled, + select-filled-disabled-text-color: text-disabled-color, + + select-filled-tiny-padding: 0.25rem 0.625rem, + select-filled-small-padding: 0.375rem 0.875rem, + select-filled-medium-padding: 0.625rem 1.125rem, + select-filled-large-padding: 0.75rem 1.125rem, + select-filled-giant-padding: 0.875rem 1.375rem, + + select-filled-primary-background-color: color-primary, + select-filled-primary-border-color: color-primary, + select-filled-primary-text-color: text-light-color, + select-filled-primary-placeholder-text-color: text-light-color, + + select-filled-primary-focus-background-color: color-primary-focus, + select-filled-primary-focus-border-color: color-primary-focus, + select-filled-primary-hover-background-color: color-primary-hover, + select-filled-primary-hover-border-color: color-primary-hover, + select-filled-primary-disabled-background-color: color-primary-disabled, + select-filled-primary-disabled-border-color: color-primary-disabled, + + select-filled-success-background-color: color-success, + select-filled-success-border-color: color-success, + select-filled-success-text-color: text-light-color, + select-filled-success-placeholder-text-color: text-light-color, + + select-filled-success-focus-background-color: color-success-focus, + select-filled-success-focus-border-color: color-success-focus, + select-filled-success-hover-background-color: color-success-hover, + select-filled-success-hover-border-color: color-success-hover, + select-filled-success-disabled-background-color: color-success-disabled, + select-filled-success-disabled-border-color: color-success-disabled, + + select-filled-info-background-color: color-info, + select-filled-info-border-color: color-info, + select-filled-info-text-color: text-light-color, + select-filled-info-placeholder-text-color: text-light-color, + + select-filled-info-focus-background-color: color-info-focus, + select-filled-info-focus-border-color: color-info-focus, + select-filled-info-hover-background-color: color-info-hover, + select-filled-info-hover-border-color: color-info-hover, + select-filled-info-disabled-background-color: color-info-disabled, + select-filled-info-disabled-border-color: color-info-disabled, + + select-filled-warning-background-color: color-warning, + select-filled-warning-border-color: color-warning, + select-filled-warning-text-color: text-light-color, + select-filled-warning-placeholder-text-color: text-light-color, + + select-filled-warning-focus-background-color: color-warning-focus, + select-filled-warning-focus-border-color: color-warning-focus, + select-filled-warning-hover-background-color: color-warning-hover, + select-filled-warning-hover-border-color: color-warning-hover, + select-filled-warning-disabled-background-color: color-warning-disabled, + select-filled-warning-disabled-border-color: color-warning-disabled, + + select-filled-danger-background-color: color-danger, + select-filled-danger-border-color: color-danger, + select-filled-danger-text-color: text-light-color, + select-filled-danger-placeholder-text-color: text-light-color, + + select-filled-danger-focus-background-color: color-danger-focus, + select-filled-danger-focus-border-color: color-danger-focus, + select-filled-danger-hover-background-color: color-danger-hover, + select-filled-danger-hover-border-color: color-danger-hover, + select-filled-danger-disabled-background-color: color-danger-disabled, + select-filled-danger-disabled-border-color: color-danger-disabled, + + select-option-filled-background-color: color-basic-100, + select-option-filled-text-color: text-dark-color, + + select-option-filled-selected-background-color: color-basic-active, + select-option-filled-focus-background-color: color-basic-focus, + select-option-filled-hover-background-color: color-basic-hover, + select-option-filled-disabled-background-color: color-basic-disabled, + select-option-filled-disabled-text-color: text-disabled-color, + + select-option-filled-tiny-padding: select-filled-tiny-padding, + select-group-option-filled-tiny-padding-start: 1.125rem, + select-option-filled-small-padding: select-filled-small-padding, + select-group-option-filled-small-padding-start: 1.75rem, + select-option-filled-medium-padding: select-filled-medium-padding, + select-group-option-filled-medium-padding-start: 2.25rem, + select-option-filled-large-padding: select-filled-large-padding, + select-group-option-filled-large-padding-start: 2.25rem, + select-option-filled-giant-padding: select-filled-giant-padding, + select-group-option-filled-giant-padding-start: 2.75rem, + + select-option-filled-primary-background-color: color-primary, + select-option-filled-primary-text-color: text-light-color, + select-option-filled-primary-selected-background-color: color-primary-active, + select-option-filled-primary-focus-background-color: color-primary-focus, + select-option-filled-primary-hover-background-color: color-primary-hover, + select-option-filled-primary-disabled-background-color: color-primary-disabled, + select-option-filled-primary-disabled-text-color: text-disabled-color, + + select-option-filled-success-background-color: color-success, + select-option-filled-success-text-color: text-light-color, + select-option-filled-success-selected-background-color: color-success-active, + select-option-filled-success-focus-background-color: color-success-focus, + select-option-filled-success-hover-background-color: color-success-hover, + select-option-filled-success-disabled-background-color: color-success-disabled, + select-option-filled-success-disabled-text-color: text-disabled-color, + + select-option-filled-info-background-color: color-info, + select-option-filled-info-text-color: text-light-color, + select-option-filled-info-selected-background-color: color-info-active, + select-option-filled-info-focus-background-color: color-info-focus, + select-option-filled-info-hover-background-color: color-info-hover, + select-option-filled-info-disabled-background-color: color-info-disabled, + select-option-filled-info-disabled-text-color: text-disabled-color, + + select-option-filled-warning-background-color: color-warning, + select-option-filled-warning-text-color: text-light-color, + select-option-filled-warning-selected-background-color: color-warning-active, + select-option-filled-warning-focus-background-color: color-warning-focus, + select-option-filled-warning-hover-background-color: color-warning-hover, + select-option-filled-warning-disabled-background-color: color-warning-disabled, + select-option-filled-warning-disabled-text-color: text-disabled-color, + + select-option-filled-danger-background-color: color-danger, + select-option-filled-danger-text-color: text-light-color, + select-option-filled-danger-selected-background-color: color-danger-active, + select-option-filled-danger-focus-background-color: color-danger-focus, + select-option-filled-danger-hover-background-color: color-danger-hover, + select-option-filled-danger-disabled-background-color: color-danger-disabled, + select-option-filled-danger-disabled-text-color: text-disabled-color, datepicker-text-color: text-dark-color, datepicker-background-color: color-white, From ff0175158c5d0a1c8b994dfe92804507dbcc8919 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 17:43:40 +0300 Subject: [PATCH 20/57] docs(select): add missing appearance binding --- .../with-layout/select/select-combinations.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/playground/with-layout/select/select-combinations.component.html b/src/playground/with-layout/select/select-combinations.component.html index 66dc80bd30..dcbe101984 100644 --- a/src/playground/with-layout/select/select-combinations.component.html +++ b/src/playground/with-layout/select/select-combinations.component.html @@ -20,7 +20,7 @@ - + Reset Option 1 Option 2 @@ -36,9 +36,9 @@ - + - + Option 1 From f1db824da7c6826a90591d98d2fa005a52554041 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 18:11:02 +0300 Subject: [PATCH 21/57] docs(select): change combinations into interactive example --- src/app/playground-components.ts | 8 +++--- ...html => select-interactive.component.html} | 28 ++++++++++++++++--- ...scss => select-interactive.component.scss} | 7 +++++ ...ent.ts => select-interactive.component.ts} | 14 +++++++--- .../select/select-routing.module.ts | 6 ++-- .../with-layout/select/select.module.ts | 7 +++-- 6 files changed, 52 insertions(+), 18 deletions(-) rename src/playground/with-layout/select/{select-combinations.component.html => select-interactive.component.html} (63%) rename src/playground/with-layout/select/{select-combinations.component.scss => select-interactive.component.scss} (67%) rename src/playground/with-layout/select/{select-combinations.component.ts => select-interactive.component.ts} (56%) diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 992b648557..30a39627f5 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -931,10 +931,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ name: 'Select Status', }, { - path: 'select-combinations.component', - link: '/select/select-combinations.component', - component: 'SelectCombinationsComponent', - name: 'Select Combinations', + path: 'select-interactive.component', + link: '/select/select-interactive.component', + component: 'SelectInteractiveComponent', + name: 'Select Interactive', }, ], }, diff --git a/src/playground/with-layout/select/select-combinations.component.html b/src/playground/with-layout/select/select-interactive.component.html similarity index 63% rename from src/playground/with-layout/select/select-combinations.component.html rename to src/playground/with-layout/select/select-interactive.component.html index dcbe101984..ddf2e124f0 100644 --- a/src/playground/with-layout/select/select-combinations.component.html +++ b/src/playground/with-layout/select/select-interactive.component.html @@ -1,10 +1,30 @@ + + +
+ Select shape: + + {{ shape }} + +
+ +
+ Select size: + + {{ size }} + +
+ + + + [status]="status" + [size]="selectedSize" + [shape]="selectedShape"> Reset value Option 1 Option 2 @@ -20,7 +40,7 @@ - + Reset Option 1 Option 2 @@ -36,9 +56,9 @@ - + - + Option 1 diff --git a/src/playground/with-layout/select/select-combinations.component.scss b/src/playground/with-layout/select/select-interactive.component.scss similarity index 67% rename from src/playground/with-layout/select/select-combinations.component.scss rename to src/playground/with-layout/select/select-interactive.component.scss index 3ec463aa63..b1f3501160 100644 --- a/src/playground/with-layout/select/select-combinations.component.scss +++ b/src/playground/with-layout/select/select-interactive.component.scss @@ -7,9 +7,16 @@ nb-card { flex: 1 0 auto; margin: 0.5rem; + + &.configuration { + flex: 0 1 auto; + } } nb-select { margin: 1rem 0; } +fieldset { + border: 0; +} diff --git a/src/playground/with-layout/select/select-combinations.component.ts b/src/playground/with-layout/select/select-interactive.component.ts similarity index 56% rename from src/playground/with-layout/select/select-combinations.component.ts rename to src/playground/with-layout/select/select-interactive.component.ts index a2bc51caa2..c7673b4b62 100644 --- a/src/playground/with-layout/select/select-combinations.component.ts +++ b/src/playground/with-layout/select/select-interactive.component.ts @@ -5,19 +5,25 @@ */ import { Component } from '@angular/core'; -import { NbComponentStatus } from '@nebular/theme'; +import { NbComponentShape, NbComponentSize, NbComponentStatus } from '@nebular/theme'; import { NbSelectAppearance } from '@nebular/theme/components/select/select.component'; type EmptyOrStatus = '' | NbComponentStatus; @Component({ selector: 'nb-select-interactive', - templateUrl: './select-combinations.component.html', - styleUrls: ['./select-combinations.component.scss'], + templateUrl: './select-interactive.component.html', + styleUrls: ['./select-interactive.component.scss'], }) -export class SelectCombinationsComponent { +export class SelectInteractiveComponent { singleSelectValue = '1'; multipleSelectValue = [ '1' ]; + statuses: EmptyOrStatus[] = [ '', 'primary', 'success', 'info', 'warning', 'danger' ]; appearances: NbSelectAppearance[] = [ 'outline', 'filled', 'hero' ]; + + selectedSize: NbComponentSize = 'medium'; + sizes: NbComponentSize[] = ['tiny', 'small', 'medium', 'large', 'giant']; + selectedShape: NbComponentShape = 'rectangle'; + shapes: NbComponentShape[] = ['rectangle', 'semi-round', 'round']; } diff --git a/src/playground/with-layout/select/select-routing.module.ts b/src/playground/with-layout/select/select-routing.module.ts index 165adf843f..0c66a5d20e 100644 --- a/src/playground/with-layout/select/select-routing.module.ts +++ b/src/playground/with-layout/select/select-routing.module.ts @@ -19,7 +19,7 @@ import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; import { SelectSizesComponent } from './select-sizes.component'; import { SelectStatusComponent } from './select-status.component'; -import { SelectCombinationsComponent } from 'playground/with-layout/select/select-combinations.component'; +import { SelectInteractiveComponent } from 'playground/with-layout/select/select-interactive.component'; const routes: Route[] = [ { @@ -75,8 +75,8 @@ const routes: Route[] = [ component: SelectStatusComponent, }, { - path: 'select-combinations.component', - component: SelectCombinationsComponent, + path: 'select-interactive.component', + component: SelectInteractiveComponent, }, ]; diff --git a/src/playground/with-layout/select/select.module.ts b/src/playground/with-layout/select/select.module.ts index 7e46f9eb22..5f37ffc18f 100644 --- a/src/playground/with-layout/select/select.module.ts +++ b/src/playground/with-layout/select/select.module.ts @@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { NbCardModule, NbSelectModule } from '@nebular/theme'; +import { NbCardModule, NbRadioModule, NbSelectModule } from '@nebular/theme'; import { SelectRoutingModule } from './select-routing.module'; import { SelectCleanComponent } from './select-clean.component'; import { SelectDisabledComponent } from './select-disabled.component'; @@ -22,7 +22,7 @@ import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; import { SelectSizesComponent } from './select-sizes.component'; import { SelectStatusComponent } from './select-status.component'; -import { SelectCombinationsComponent } from './select-combinations.component'; +import { SelectInteractiveComponent } from './select-interactive.component'; @NgModule({ declarations: [ @@ -39,7 +39,7 @@ import { SelectCombinationsComponent } from './select-combinations.component'; SelectShowcaseComponent, SelectSizesComponent, SelectStatusComponent, - SelectCombinationsComponent, + SelectInteractiveComponent, ], imports: [ FormsModule, @@ -48,6 +48,7 @@ import { SelectCombinationsComponent } from './select-combinations.component'; SelectRoutingModule, NbCardModule, CommonModule, + NbRadioModule, ], }) export class SelectModule {} From 8304687690c893ac0622e53d45c0aca95f33ba21 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 19:26:46 +0300 Subject: [PATCH 22/57] fix(select): use status theme variable --- src/framework/theme/components/select/_select-filled.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss index 6ccd998235..c2d2a8765b 100644 --- a/src/framework/theme/components/select/_select-filled.scss +++ b/src/framework/theme/components/select/_select-filled.scss @@ -69,7 +69,7 @@ color: nb-theme(select-filled-#{$status}-text-color); &.placeholder { - color: nb-theme(select-filled-primary-placeholder-text-color); + color: nb-theme(select-filled-#{$status}-placeholder-text-color); } &:focus { From 8245037d4f9712b92ce2e7402142b4a84c5bad81 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 19:48:40 +0300 Subject: [PATCH 23/57] feat(select): add hero status --- .../select/_select.component.theme.scss | 2 + .../theme/components/select/select-hero.scss | 123 +++++++++ .../theme/styles/themes/_default.scss | 235 ++++++++++++++++++ 3 files changed, 360 insertions(+) create mode 100644 src/framework/theme/components/select/select-hero.scss diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 160b5414cc..260768ea86 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -6,6 +6,7 @@ @import './select-outline'; @import './select-filled'; +@import './select-hero'; @mixin nb-select-theme() { nb-select { @@ -83,6 +84,7 @@ @include select-outline; @include select-filled; + @include select-hero; nb-icon { color: nb-theme(select-checkmark-color); diff --git a/src/framework/theme/components/select/select-hero.scss b/src/framework/theme/components/select/select-hero.scss new file mode 100644 index 0000000000..04ae83f87e --- /dev/null +++ b/src/framework/theme/components/select/select-hero.scss @@ -0,0 +1,123 @@ +@mixin select-hero { + nb-select.appearance-hero .select-button { + $left-color: nb-theme(select-hero-left-background-color); + $right-color: nb-theme(select-hero-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + border-color: nb-theme(select-hero-border-color); + border-style: nb-theme(select-hero-border-style); + border-width: nb-theme(select-hero-border-width); + color: nb-theme(select-hero-text-color); + + &.placeholder { + color: nb-theme(select-hero-placeholder-text-color); + } + + &:focus { + $left-color: nb-theme(select-hero-focus-left-background-color); + $right-color: nb-theme(select-hero-focus-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + } + &:hover { + $left-color: nb-theme(select-hero-hover-left-background-color); + $right-color: nb-theme(select-hero-hover-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + } + &[disabled] { + color: nb-theme(select-hero-disabled-text-color); + $left-color: nb-theme(select-hero-disabled-left-background-color); + $right-color: nb-theme(select-hero-disabled-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + } + } + + @each $size in nb-get-sizes() { + nb-select.appearance-hero.size-#{$size} .select-button { + padding: nb-theme(select-hero-#{$size}-padding); + } + .appearance-hero.size-#{$size} { + nb-option-group .option-group-title, + nb-option { + padding: nb-theme(select-option-hero-#{$size}-padding); + } + nb-option-group nb-option { + padding-left: nb-theme(select-group-option-outline-#{$size}-start-padding); + } + } + } + + .appearance-hero nb-option-group, + .appearance-hero nb-option { + background-color: nb-theme(select-option-hero-background-color); + color: nb-theme(select-option-hero-text-color); + + &[disabled] { + background-color: nb-theme(select-option-hero-disabled-background-color); + color: nb-theme(select-option-hero-disabled-text-color); + } + } + + .appearance-hero nb-option { + &.selected { + background-color: nb-theme(select-option-hero-selected-background-color); + } + &:focus { + background-color: nb-theme(select-option-hero-focus-background-color); + } + &:hover { + background-color: nb-theme(select-option-hero-hover-background-color); + } + } + + @each $status in nb-get-statuses() { + nb-select.appearance-hero.status-#{$status} .select-button { + $left-color: nb-theme(select-hero-#{$status}-left-background-color); + $right-color: nb-theme(select-hero-#{$status}-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + color: nb-theme(select-hero-#{$status}-text-color); + + &.placeholder { + color: nb-theme(select-hero-#{$status}-placeholder-text-color); + } + + &:focus { + $left-color: nb-theme(select-hero-#{$status}-focus-left-background-color); + $right-color: nb-theme(select-hero-#{$status}-focus-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + } + &:hover { + $left-color: nb-theme(select-hero-#{$status}-hover-left-background-color); + $right-color: nb-theme(select-hero-#{$status}-hover-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + } + &[disabled] { + color: nb-theme(select-hero-#{$status}-disabled-text-color); + $left-color: nb-theme(select-hero-#{$status}-disabled-left-background-color); + $right-color: nb-theme(select-hero-#{$status}-disabled-right-background-color); + background-image: linear-gradient(to right, $left-color, $right-color); + } + } + + .appearance-hero.status-#{$status} nb-option-group, + .appearance-hero.status-#{$status} nb-option { + background-color: nb-theme(select-option-hero-#{$status}-background-color); + color: nb-theme(select-option-hero-#{$status}-text-color); + + &[disabled] { + background-color: nb-theme(select-option-hero-#{$status}-disabled-background-color); + color: nb-theme(select-option-hero-#{$status}-disabled-text-color); + } + } + + .appearance-hero.status-#{$status} nb-option { + &.selected { + background-color: nb-theme(select-option-hero-#{$status}-selected-background-color); + } + &:focus { + background-color: nb-theme(select-option-hero-#{$status}-focus-background-color); + } + &:hover { + background-color: nb-theme(select-option-hero-#{$status}-hover-background-color); + } + } + } +} diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 17acddddf0..8c985646e1 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1587,6 +1587,241 @@ $theme: ( select-option-filled-danger-disabled-background-color: color-danger-disabled, select-option-filled-danger-disabled-text-color: text-disabled-color, + select-hero-left-background-color: color-basic-400, + select-hero-right-background-color: color-basic, + select-hero-border-color: transparent, + select-hero-border-style: solid, + select-hero-border-width: 0, + select-hero-text-color: text-dark-color, + select-hero-placeholder-text-color: text-dark-color, + + select-hero-focus-left-background-color: color-basic-700, + select-hero-focus-right-background-color: color-basic-800, + select-hero-hover-left-background-color: color-basic-300, + select-hero-hover-right-background-color: color-basic-400, + select-hero-disabled-left-background-color: color-basic-100, + select-hero-disabled-right-background-color: color-basic-200, + select-hero-disabled-text-color: text-disabled-color, + + select-hero-tiny-padding: 0.375rem 0.625rem, + select-hero-small-padding: 0.5rem 0.875rem, + select-hero-medium-padding: 0.75rem 1.125rem, + select-hero-large-padding: 0.875rem 1.125rem, + select-hero-giant-padding: 1rem 1.375rem, + + select-hero-primary-left-background-color: color-primary-400, + select-hero-primary-right-background-color: color-primary, + select-hero-primary-text-color: text-light-color, + select-hero-primary-placeholder-text-color: text-light-color, + + select-hero-primary-focus-left-background-color: color-primary-700, + select-hero-primary-focus-right-background-color: color-primary-800, + select-hero-primary-hover-left-background-color: color-primary-300, + select-hero-primary-hover-right-background-color: color-primary-400, + select-hero-primary-disabled-left-background-color: color-primary-100, + select-hero-primary-disabled-right-background-color: color-primary-200, + select-hero-primary-disabled-text-color: text-disabled-color, + + select-hero-success-left-background-color: color-success-400, + select-hero-success-right-background-color: color-success, + select-hero-success-text-color: text-light-color, + select-hero-success-placeholder-text-color: text-light-color, + + select-hero-success-focus-left-background-color: color-success-700, + select-hero-success-focus-right-background-color: color-success-800, + select-hero-success-hover-left-background-color: color-success-300, + select-hero-success-hover-right-background-color: color-success-400, + select-hero-success-disabled-left-background-color: color-success-100, + select-hero-success-disabled-right-background-color: color-success-200, + select-hero-success-disabled-text-color: text-disabled-color, + + select-hero-info-left-background-color: color-info-400, + select-hero-info-right-background-color: color-info, + select-hero-info-text-color: text-light-color, + select-hero-info-placeholder-text-color: text-light-color, + + select-hero-info-focus-left-background-color: color-info-700, + select-hero-info-focus-right-background-color: color-info-800, + select-hero-info-hover-left-background-color: color-info-300, + select-hero-info-hover-right-background-color: color-info-400, + select-hero-info-disabled-left-background-color: color-info-100, + select-hero-info-disabled-right-background-color: color-info-200, + select-hero-info-disabled-text-color: text-disabled-color, + + select-hero-warning-left-background-color: color-warning-400, + select-hero-warning-right-background-color: color-warning, + select-hero-warning-text-color: text-light-color, + select-hero-warning-placeholder-text-color: text-light-color, + + select-hero-warning-focus-left-background-color: color-warning-700, + select-hero-warning-focus-right-background-color: color-warning-800, + select-hero-warning-hover-left-background-color: color-warning-300, + select-hero-warning-hover-right-background-color: color-warning-400, + select-hero-warning-disabled-left-background-color: color-warning-100, + select-hero-warning-disabled-right-background-color: color-warning-200, + select-hero-warning-disabled-text-color: text-disabled-color, + + select-hero-danger-left-background-color: color-danger-400, + select-hero-danger-right-background-color: color-danger, + select-hero-danger-text-color: text-light-color, + select-hero-danger-placeholder-text-color: text-light-color, + + select-hero-danger-focus-left-background-color: color-danger-700, + select-hero-danger-focus-right-background-color: color-danger-800, + select-hero-danger-hover-left-background-color: color-danger-300, + select-hero-danger-hover-right-background-color: color-danger-400, + select-hero-danger-disabled-left-background-color: color-danger-100, + select-hero-danger-disabled-right-background-color: color-danger-200, + select-hero-danger-disabled-text-color: text-disabled-color, + + select-option-hero-background-color: color-basic-100, + select-option-hero-text-color: text-dark-color, + + select-option-hero-selected-background-color: color-basic-active, + select-option-hero-focus-background-color: color-basic-focus, + select-option-hero-hover-background-color: color-basic-hover, + select-option-hero-disabled-background-color: color-basic-disabled, + select-option-hero-disabled-text-color: text-disabled-color, + + select-option-hero-tiny-padding: select-hero-tiny-padding, + select-group-option-hero-tiny-padding-start: 1.125rem, + select-option-hero-small-padding: select-hero-small-padding, + select-group-option-hero-small-padding-start: 1.75rem, + select-option-hero-medium-padding: select-hero-medium-padding, + select-group-option-hero-medium-padding-start: 2.25rem, + select-option-hero-large-padding: select-hero-large-padding, + select-group-option-hero-large-padding-start: 2.25rem, + select-option-hero-giant-padding: select-hero-giant-padding, + select-group-option-hero-giant-padding-start: 2.75rem, + + select-option-hero-primary-background-color: color-primary, + select-option-hero-primary-text-color: text-light-color, + select-option-hero-primary-selected-background-color: color-primary-active, + select-option-hero-primary-focus-background-color: color-primary-focus, + select-option-hero-primary-hover-background-color: color-primary-hover, + select-option-hero-primary-disabled-background-color: color-primary-disabled, + select-option-hero-primary-disabled-text-color: text-disabled-color, + + select-option-hero-success-background-color: color-success, + select-option-hero-success-text-color: text-light-color, + select-option-hero-success-selected-background-color: color-success-active, + select-option-hero-success-focus-background-color: color-success-focus, + select-option-hero-success-hover-background-color: color-success-hover, + select-option-hero-success-disabled-background-color: color-success-disabled, + select-option-hero-success-disabled-text-color: text-disabled-color, + + select-option-hero-info-background-color: color-info, + select-option-hero-info-text-color: text-light-color, + select-option-hero-info-selected-background-color: color-info-active, + select-option-hero-info-focus-background-color: color-info-focus, + select-option-hero-info-hover-background-color: color-info-hover, + select-option-hero-info-disabled-background-color: color-info-disabled, + select-option-hero-info-disabled-text-color: text-disabled-color, + + select-option-hero-warning-background-color: color-warning, + select-option-hero-warning-text-color: text-light-color, + select-option-hero-warning-selected-background-color: color-warning-active, + select-option-hero-warning-focus-background-color: color-warning-focus, + select-option-hero-warning-hover-background-color: color-warning-hover, + select-option-hero-warning-disabled-background-color: color-warning-disabled, + select-option-hero-warning-disabled-text-color: text-disabled-color, + + select-option-hero-danger-background-color: color-danger, + select-option-hero-danger-text-color: text-light-color, + select-option-hero-danger-selected-background-color: color-danger-active, + select-option-hero-danger-focus-background-color: color-danger-focus, + select-option-hero-danger-hover-background-color: color-danger-hover, + select-option-hero-danger-disabled-background-color: color-danger-disabled, + select-option-hero-danger-disabled-text-color: text-disabled-color, + + //button-hero-border-color: transparent, + //button-hero-border-style: solid, + //button-hero-border-width: 0, + //button-hero-text-transform: uppercase, + // + //button-hero-tiny-padding: 0.375rem 0.75rem, + //button-hero-small-padding: 0.5rem 1rem, + //button-hero-medium-padding: 0.75rem 1.25rem, + //button-hero-large-padding: 0.875rem 1.25rem, + //button-hero-giant-padding: 1rem 1.5rem, + // + //button-hero-shadow: 0 0 transparent, + //button-hero-text-shadow: none, + //button-hero-bevel-size: 0 0 0 0, + //button-hero-glow-size: 0 0 0 0, + //button-hero-outline-color: outline-color, + //button-hero-outline-width: outline-width, + // + //button-hero-primary-text-color: text-light-color, + //button-hero-primary-bevel-color: color-primary-600, + //button-hero-primary-glow-color: color-primary-700, + //button-hero-primary-left-background-color: color-primary-400, + //button-hero-primary-right-background-color: color-primary, + //button-hero-primary-focus-left-background-color: color-primary-700, + //button-hero-primary-focus-right-background-color: color-primary-800, + //button-hero-primary-hover-left-background-color: color-primary-300, + //button-hero-primary-hover-right-background-color: color-primary-400, + //button-hero-primary-active-left-background-color: color-primary, + //button-hero-primary-active-right-background-color: color-primary-600, + //button-hero-primary-disabled-left-background-color: color-primary-100, + //button-hero-primary-disabled-right-background-color: color-primary-200, + // + //button-hero-success-text-color: text-light-color, + //button-hero-success-bevel-color: color-success-600, + //button-hero-success-glow-color: color-success-700, + //button-hero-success-left-background-color: color-success-400, + //button-hero-success-right-background-color: color-success, + //button-hero-success-focus-left-background-color: color-success-700, + //button-hero-success-focus-right-background-color: color-success-800, + //button-hero-success-hover-left-background-color: color-success-300, + //button-hero-success-hover-right-background-color: color-success-400, + //button-hero-success-active-left-background-color: color-success, + //button-hero-success-active-right-background-color: color-success-600, + //button-hero-success-disabled-left-background-color: color-success-100, + //button-hero-success-disabled-right-background-color: color-success-200, + // + //button-hero-info-text-color: text-light-color, + //button-hero-info-bevel-color: color-info-600, + //button-hero-info-glow-color: color-info-700, + //button-hero-info-left-background-color: color-info-400, + //button-hero-info-right-background-color: color-info, + //button-hero-info-focus-left-background-color: color-info-700, + //button-hero-info-focus-right-background-color: color-info-800, + //button-hero-info-hover-left-background-color: color-info-300, + //button-hero-info-hover-right-background-color: color-info-400, + //button-hero-info-active-left-background-color: color-info, + //button-hero-info-active-right-background-color: color-info-600, + //button-hero-info-disabled-left-background-color: color-info-100, + //button-hero-info-disabled-right-background-color: color-info-200, + // + //button-hero-warning-text-color: text-light-color, + //button-hero-warning-bevel-color: color-warning-600, + //button-hero-warning-glow-color: color-warning-700, + //button-hero-warning-left-background-color: color-warning-400, + //button-hero-warning-right-background-color: color-warning, + //button-hero-warning-focus-left-background-color: color-warning-700, + //button-hero-warning-focus-right-background-color: color-warning-800, + //button-hero-warning-hover-left-background-color: color-warning-300, + //button-hero-warning-hover-right-background-color: color-warning-400, + //button-hero-warning-active-left-background-color: color-warning, + //button-hero-warning-active-right-background-color: color-warning-600, + //button-hero-warning-disabled-left-background-color: color-warning-100, + //button-hero-warning-disabled-right-background-color: color-warning-200, + // + //button-hero-danger-text-color: text-light-color, + //button-hero-danger-bevel-color: color-danger-600, + //button-hero-danger-glow-color: color-danger-700, + //button-hero-danger-left-background-color: color-danger-400, + //button-hero-danger-right-background-color: color-danger, + //button-hero-danger-focus-left-background-color: color-danger-700, + //button-hero-danger-focus-right-background-color: color-danger-800, + //button-hero-danger-hover-left-background-color: color-danger-300, + //button-hero-danger-hover-right-background-color: color-danger-400, + //button-hero-danger-active-left-background-color: color-danger, + //button-hero-danger-active-right-background-color: color-danger-600, + //button-hero-danger-disabled-left-background-color: color-danger-100, + //button-hero-danger-disabled-right-background-color: color-danger-200, + datepicker-text-color: text-dark-color, datepicker-background-color: color-white, datepicker-border-color: color-primary, From 4cf708aab74b0d4c93df116e4533fe07231c7e12 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 19:59:25 +0300 Subject: [PATCH 24/57] docs(select): add button to select disabled option --- .../with-layout/select/select-interactive.component.html | 2 ++ .../with-layout/select/select-interactive.component.ts | 6 ++++++ src/playground/with-layout/select/select.module.ts | 3 ++- 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/playground/with-layout/select/select-interactive.component.html b/src/playground/with-layout/select/select-interactive.component.html index ddf2e124f0..c09e203aa5 100644 --- a/src/playground/with-layout/select/select-interactive.component.html +++ b/src/playground/with-layout/select/select-interactive.component.html @@ -13,6 +13,8 @@ {{ size }} + + diff --git a/src/playground/with-layout/select/select-interactive.component.ts b/src/playground/with-layout/select/select-interactive.component.ts index c7673b4b62..ef5012bd40 100644 --- a/src/playground/with-layout/select/select-interactive.component.ts +++ b/src/playground/with-layout/select/select-interactive.component.ts @@ -18,6 +18,7 @@ type EmptyOrStatus = '' | NbComponentStatus; export class SelectInteractiveComponent { singleSelectValue = '1'; multipleSelectValue = [ '1' ]; + disabledOptionValue = '3'; statuses: EmptyOrStatus[] = [ '', 'primary', 'success', 'info', 'warning', 'danger' ]; appearances: NbSelectAppearance[] = [ 'outline', 'filled', 'hero' ]; @@ -26,4 +27,9 @@ export class SelectInteractiveComponent { sizes: NbComponentSize[] = ['tiny', 'small', 'medium', 'large', 'giant']; selectedShape: NbComponentShape = 'rectangle'; shapes: NbComponentShape[] = ['rectangle', 'semi-round', 'round']; + + selectDisabledOption(): void { + this.singleSelectValue = this.disabledOptionValue; + this.multipleSelectValue = [this.disabledOptionValue]; + } } diff --git a/src/playground/with-layout/select/select.module.ts b/src/playground/with-layout/select/select.module.ts index 5f37ffc18f..2b53700a9e 100644 --- a/src/playground/with-layout/select/select.module.ts +++ b/src/playground/with-layout/select/select.module.ts @@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { NbCardModule, NbRadioModule, NbSelectModule } from '@nebular/theme'; +import { NbButtonModule, NbCardModule, NbRadioModule, NbSelectModule } from '@nebular/theme'; import { SelectRoutingModule } from './select-routing.module'; import { SelectCleanComponent } from './select-clean.component'; import { SelectDisabledComponent } from './select-disabled.component'; @@ -49,6 +49,7 @@ import { SelectInteractiveComponent } from './select-interactive.component'; NbCardModule, CommonModule, NbRadioModule, + NbButtonModule, ], }) export class SelectModule {} From 8e5bc4b266f76c3dd15105c950687bbc880f6f44 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 20:04:55 +0300 Subject: [PATCH 25/57] refactor(option group): remove unnecessary style --- .../theme/components/select/option-group.component.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/framework/theme/components/select/option-group.component.scss b/src/framework/theme/components/select/option-group.component.scss index 4580ff13a5..6eaa545a3f 100644 --- a/src/framework/theme/components/select/option-group.component.scss +++ b/src/framework/theme/components/select/option-group.component.scss @@ -11,12 +11,3 @@ .option-group-title { display: block; } - - /deep/ nb-option { - padding: 0.75rem 0.75rem 0.75rem 2.5rem; - } -} - -:host([disabled]) { - pointer-events: none; -} From 5abae6f989a8d66e542237e1ec3668b2402f9bf9 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 20:05:32 +0300 Subject: [PATCH 26/57] feat(select): add missing animation properties --- src/framework/theme/components/select/option.component.scss | 3 +++ src/framework/theme/components/select/select.component.scss | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/option.component.scss b/src/framework/theme/components/select/option.component.scss index 2749ac85b5..ceb15b9fe8 100644 --- a/src/framework/theme/components/select/option.component.scss +++ b/src/framework/theme/components/select/option.component.scss @@ -4,8 +4,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@import '../../styles/core/mixins'; + :host { display: block; + @include nb-component-animation(background-color, color); &:hover { cursor: pointer; diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index a7e3c83cfb..5b7db8a22f 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -27,7 +27,7 @@ white-space: nowrap; text-transform: none; - @include nb-component-animation(border-color, border-radius, background-color, color); + @include nb-component-animation(background-color, border-color, border-radius, box-shadow, color); } nb-icon { From 1cb16efca96db7261e47d589b1622068e9ff9102 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 20:49:17 +0300 Subject: [PATCH 27/57] fix(select): remove broken scss --- .../components/select/_select.component.theme.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 260768ea86..4e32c521a4 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -85,18 +85,4 @@ @include select-outline; @include select-filled; @include select-hero; - - nb-icon { - color: nb-theme(select-checkmark-color); - } - } - } - - nb-option, nb-option-group { - &.disabled { - background-color: nb-theme(select-option-disabled-bg); - opacity: nb-theme(select-option-disabled-opacity); - } - } - } } From 8f658cc38a05dac0fff1c8a11836f72388ab4cb7 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 21:20:14 +0300 Subject: [PATCH 28/57] refactor(select): remove unused import --- src/framework/theme/components/select/select.component.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 8daaf473a2..d46872d58e 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -46,7 +46,6 @@ import { NbComponentSize } from '../component-size'; import { NbComponentShape } from '../component-shape'; import { NbComponentStatus } from '../component-status'; import { NbOptionComponent } from './option.component'; -import { NbButtonComponent } from '../button/button.component'; import { NB_DOCUMENT } from '../../theme.options'; import { convertToBoolProperty } from '../helpers'; @@ -70,7 +69,7 @@ export class NbSelectLabelComponent { * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbSelectModule, * ], * }) From 289add03a3dcebac30ff3cbba3e738457a0fbd90 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 17 Apr 2019 21:35:25 +0300 Subject: [PATCH 29/57] fix(select): add missing methods --- .../components/select/select.component.ts | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index d46872d58e..ef4f804043 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -369,6 +369,29 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent return this.hostRef.nativeElement.getBoundingClientRect().width; } + get selectButtonClasses(): string[] { + const classes = []; + + if (!this.selectionModel.length) { + classes.push('placeholder') + } + if (this.isOpen) { + classes.push(this.overlayPosition); + } + + return classes; + } + + get optionsListClasses(): string[] { + return [ + `appearance-${this.appearance}`, + `size-${this.size}`, + `shape-${this.shape}`, + `status-${this.status}`, + this.overlayPosition, + ]; + } + /** * Content rendered in the label. * */ From d817d4e57d565aa6516e26f8d57c7093919e2265 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 18 Apr 2019 15:05:38 +0300 Subject: [PATCH 30/57] refactor: remove commented lines --- .../theme/styles/themes/_default.scss | 88 ------------------- 1 file changed, 88 deletions(-) diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 8c985646e1..3d83876d78 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1734,94 +1734,6 @@ $theme: ( select-option-hero-danger-disabled-background-color: color-danger-disabled, select-option-hero-danger-disabled-text-color: text-disabled-color, - //button-hero-border-color: transparent, - //button-hero-border-style: solid, - //button-hero-border-width: 0, - //button-hero-text-transform: uppercase, - // - //button-hero-tiny-padding: 0.375rem 0.75rem, - //button-hero-small-padding: 0.5rem 1rem, - //button-hero-medium-padding: 0.75rem 1.25rem, - //button-hero-large-padding: 0.875rem 1.25rem, - //button-hero-giant-padding: 1rem 1.5rem, - // - //button-hero-shadow: 0 0 transparent, - //button-hero-text-shadow: none, - //button-hero-bevel-size: 0 0 0 0, - //button-hero-glow-size: 0 0 0 0, - //button-hero-outline-color: outline-color, - //button-hero-outline-width: outline-width, - // - //button-hero-primary-text-color: text-light-color, - //button-hero-primary-bevel-color: color-primary-600, - //button-hero-primary-glow-color: color-primary-700, - //button-hero-primary-left-background-color: color-primary-400, - //button-hero-primary-right-background-color: color-primary, - //button-hero-primary-focus-left-background-color: color-primary-700, - //button-hero-primary-focus-right-background-color: color-primary-800, - //button-hero-primary-hover-left-background-color: color-primary-300, - //button-hero-primary-hover-right-background-color: color-primary-400, - //button-hero-primary-active-left-background-color: color-primary, - //button-hero-primary-active-right-background-color: color-primary-600, - //button-hero-primary-disabled-left-background-color: color-primary-100, - //button-hero-primary-disabled-right-background-color: color-primary-200, - // - //button-hero-success-text-color: text-light-color, - //button-hero-success-bevel-color: color-success-600, - //button-hero-success-glow-color: color-success-700, - //button-hero-success-left-background-color: color-success-400, - //button-hero-success-right-background-color: color-success, - //button-hero-success-focus-left-background-color: color-success-700, - //button-hero-success-focus-right-background-color: color-success-800, - //button-hero-success-hover-left-background-color: color-success-300, - //button-hero-success-hover-right-background-color: color-success-400, - //button-hero-success-active-left-background-color: color-success, - //button-hero-success-active-right-background-color: color-success-600, - //button-hero-success-disabled-left-background-color: color-success-100, - //button-hero-success-disabled-right-background-color: color-success-200, - // - //button-hero-info-text-color: text-light-color, - //button-hero-info-bevel-color: color-info-600, - //button-hero-info-glow-color: color-info-700, - //button-hero-info-left-background-color: color-info-400, - //button-hero-info-right-background-color: color-info, - //button-hero-info-focus-left-background-color: color-info-700, - //button-hero-info-focus-right-background-color: color-info-800, - //button-hero-info-hover-left-background-color: color-info-300, - //button-hero-info-hover-right-background-color: color-info-400, - //button-hero-info-active-left-background-color: color-info, - //button-hero-info-active-right-background-color: color-info-600, - //button-hero-info-disabled-left-background-color: color-info-100, - //button-hero-info-disabled-right-background-color: color-info-200, - // - //button-hero-warning-text-color: text-light-color, - //button-hero-warning-bevel-color: color-warning-600, - //button-hero-warning-glow-color: color-warning-700, - //button-hero-warning-left-background-color: color-warning-400, - //button-hero-warning-right-background-color: color-warning, - //button-hero-warning-focus-left-background-color: color-warning-700, - //button-hero-warning-focus-right-background-color: color-warning-800, - //button-hero-warning-hover-left-background-color: color-warning-300, - //button-hero-warning-hover-right-background-color: color-warning-400, - //button-hero-warning-active-left-background-color: color-warning, - //button-hero-warning-active-right-background-color: color-warning-600, - //button-hero-warning-disabled-left-background-color: color-warning-100, - //button-hero-warning-disabled-right-background-color: color-warning-200, - // - //button-hero-danger-text-color: text-light-color, - //button-hero-danger-bevel-color: color-danger-600, - //button-hero-danger-glow-color: color-danger-700, - //button-hero-danger-left-background-color: color-danger-400, - //button-hero-danger-right-background-color: color-danger, - //button-hero-danger-focus-left-background-color: color-danger-700, - //button-hero-danger-focus-right-background-color: color-danger-800, - //button-hero-danger-hover-left-background-color: color-danger-300, - //button-hero-danger-hover-right-background-color: color-danger-400, - //button-hero-danger-active-left-background-color: color-danger, - //button-hero-danger-active-right-background-color: color-danger-600, - //button-hero-danger-disabled-left-background-color: color-danger-100, - //button-hero-danger-disabled-right-background-color: color-danger-200, - datepicker-text-color: text-dark-color, datepicker-background-color: color-white, datepicker-border-color: color-primary, From 5bbeaf68431f7cd9ab35baae3a75fa43e4f664dc Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 18 Apr 2019 21:19:42 +0300 Subject: [PATCH 31/57] refactor(select): use common name for theme file --- .../components/select/{select-hero.scss => _select-hero.scss} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/framework/theme/components/select/{select-hero.scss => _select-hero.scss} (100%) diff --git a/src/framework/theme/components/select/select-hero.scss b/src/framework/theme/components/select/_select-hero.scss similarity index 100% rename from src/framework/theme/components/select/select-hero.scss rename to src/framework/theme/components/select/_select-hero.scss From 97b7e1ffbdc01eeac473b617ddac209043e2e92a Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 18 Apr 2019 21:33:33 +0300 Subject: [PATCH 32/57] fix(select): update property name --- .../theme/components/select/select.spec.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/framework/theme/components/select/select.spec.ts b/src/framework/theme/components/select/select.spec.ts index 3c09ce6ac0..920adbaf51 100644 --- a/src/framework/theme/components/select/select.spec.ts +++ b/src/framework/theme/components/select/select.spec.ts @@ -553,7 +553,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should clean selection when selected option does not have a value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.noValueOption.onClick(); @@ -563,7 +563,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should clean selection when selected option has null value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.nullOption.onClick(); @@ -573,7 +573,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should clean selection when selected option has undefined value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.undefinedOption.onClick(); @@ -583,7 +583,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should not reset selection when selected option has false value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.falseOption.onClick(); @@ -593,7 +593,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should not reset selection when selected option has zero value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.zeroOption.onClick(); @@ -603,7 +603,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should not reset selection when selected option has empty string value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.emptyStringOption.onClick(); @@ -613,7 +613,7 @@ describe('NbSelectComponent - falsy values', () => { })); it('should not reset selection when selected option has NaN value', fakeAsync(() => { - select.setSelected = testComponent.truthyOption.value; + select.selected = testComponent.truthyOption.value; fixture.detectChanges(); testComponent.nanOption.onClick(); From 7ca9085f2b770e6ee41851dfd824b4e4fc0465b2 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 18 Apr 2019 21:47:18 +0300 Subject: [PATCH 33/57] docs(select): update theme properties list --- .../components/select/select.component.ts | 322 +++++++++++++++++- 1 file changed, 314 insertions(+), 8 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 71cef95959..1a26a3fb0a 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -137,14 +137,320 @@ export class NbSelectLabelComponent { * * @styles * - * select-border-width: - * select-max-height: - * select-bg: - * select-checkbox-color: - * select-checkmark-color: - * select-option-disabled-bg: - * select-option-disabled-opacity: - * select-option-padding: + * select-cursor: + * select-disabled-cursor: + * select-options-list-max-height: + * select-outline-width: + * select-outline-color: + * select-text-font-family: + * select-text-font-weight: + * select-placeholder-text-font-weight: + * select-tiny-text-font-size: + * select-tiny-text-line-height: + * select-small-text-font-size: + * select-small-text-line-height: + * select-medium-text-font-size: + * select-medium-text-line-height: + * select-large-text-font-size: + * select-large-text-line-height: + * select-giant-text-font-size: + * select-giant-text-line-height: + * select-rectangle-border-radius: + * select-semi-round-border-radius: + * select-round-border-radius: + * select-outline-background-color: + * select-outline-border-color: + * select-outline-border-style: + * select-outline-border-width: + * select-outline-text-color: + * select-outline-placeholder-text-color: + * select-outline-focus-border-color: + * select-outline-hover-border-color: + * select-outline-disabled-border-color: + * select-outline-disabled-background-color: + * select-outline-disabled-text-color: + * select-outline-tiny-padding: + * select-outline-small-padding: + * select-outline-medium-padding: + * select-outline-large-padding: + * select-outline-giant-padding: + * select-outline-primary-border-color: + * select-outline-primary-focus-border-color: + * select-outline-primary-hover-border-color: + * select-outline-success-border-color: + * select-outline-success-focus-border-color: + * select-outline-success-hover-border-color: + * select-outline-info-border-color: + * select-outline-info-focus-border-color: + * select-outline-info-hover-border-color: + * select-outline-warning-border-color: + * select-outline-warning-focus-border-color: + * select-outline-warning-hover-border-color: + * select-outline-danger-border-color: + * select-outline-danger-focus-border-color: + * select-outline-danger-hover-border-color: + * select-option-outline-background-color: + * select-option-outline-text-color: + * select-option-outline-tiny-padding: + * select-group-option-outline-tiny-start-padding: + * select-option-outline-small-padding: + * select-group-option-outline-small-start-padding: + * select-option-outline-medium-padding: + * select-group-option-outline-medium-start-padding: + * select-option-outline-large-padding: + * select-group-option-outline-large-start-padding: + * select-option-outline-giant-padding: + * select-group-option-outline-giant-start-padding: + * select-option-outline-selected-background-color: + * select-option-outline-focus-background-color: + * select-option-outline-hover-background-color: + * select-option-outline-disabled-background-color: + * select-option-outline-disabled-text-color: + * select-filled-background-color: + * select-filled-border-color: + * select-filled-border-style: + * select-filled-border-width: + * select-filled-text-color: + * select-filled-placeholder-text-color: + * select-filled-focus-border-color: + * select-filled-hover-background-color: + * select-filled-hover-border-color: + * select-filled-disabled-background-color: + * select-filled-disabled-border-color: + * select-filled-disabled-text-color: + * select-filled-tiny-padding: + * select-filled-small-padding: + * select-filled-medium-padding: + * select-filled-large-padding: + * select-filled-giant-padding: + * select-filled-primary-background-color: + * select-filled-primary-border-color: + * select-filled-primary-text-color: + * select-filled-primary-placeholder-text-color: + * select-filled-primary-focus-background-color: + * select-filled-primary-focus-border-color: + * select-filled-primary-hover-background-color: + * select-filled-primary-hover-border-color: + * select-filled-primary-disabled-background-color: + * select-filled-primary-disabled-border-color: + * select-filled-success-background-color: + * select-filled-success-border-color: + * select-filled-success-text-color: + * select-filled-success-placeholder-text-color: + * select-filled-success-focus-background-color: + * select-filled-success-focus-border-color: + * select-filled-success-hover-background-color: + * select-filled-success-hover-border-color: + * select-filled-success-disabled-background-color: + * select-filled-success-disabled-border-color: + * select-filled-info-background-color: + * select-filled-info-border-color: + * select-filled-info-text-color: + * select-filled-info-placeholder-text-color: + * select-filled-info-focus-background-color: + * select-filled-info-focus-border-color: + * select-filled-info-hover-background-color: + * select-filled-info-hover-border-color: + * select-filled-info-disabled-background-color: + * select-filled-info-disabled-border-color: + * select-filled-warning-background-color: + * select-filled-warning-border-color: + * select-filled-warning-text-color: + * select-filled-warning-placeholder-text-color: + * select-filled-warning-focus-background-color: + * select-filled-warning-focus-border-color: + * select-filled-warning-hover-background-color: + * select-filled-warning-hover-border-color: + * select-filled-warning-disabled-background-color: + * select-filled-warning-disabled-border-color: + * select-filled-danger-background-color: + * select-filled-danger-border-color: + * select-filled-danger-text-color: + * select-filled-danger-placeholder-text-color: + * select-filled-danger-focus-background-color: + * select-filled-danger-focus-border-color: + * select-filled-danger-hover-background-color: + * select-filled-danger-hover-border-color: + * select-filled-danger-disabled-background-color: + * select-filled-danger-disabled-border-color: + * select-option-filled-background-color: + * select-option-filled-text-color: + * select-option-filled-selected-background-color: + * select-option-filled-focus-background-color: + * select-option-filled-hover-background-color: + * select-option-filled-disabled-background-color: + * select-option-filled-disabled-text-color: + * select-option-filled-tiny-padding: + * select-group-option-filled-tiny-padding-start: + * select-option-filled-small-padding: + * select-group-option-filled-small-padding-start: + * select-option-filled-medium-padding: + * select-group-option-filled-medium-padding-start: + * select-option-filled-large-padding: + * select-group-option-filled-large-padding-start: + * select-option-filled-giant-padding: + * select-group-option-filled-giant-padding-start: + * select-option-filled-primary-background-color: + * select-option-filled-primary-text-color: + * select-option-filled-primary-selected-background-color: + * select-option-filled-primary-focus-background-color: + * select-option-filled-primary-hover-background-color: + * select-option-filled-primary-disabled-background-color: + * select-option-filled-primary-disabled-text-color: + * select-option-filled-success-background-color: + * select-option-filled-success-text-color: + * select-option-filled-success-selected-background-color: + * select-option-filled-success-focus-background-color: + * select-option-filled-success-hover-background-color: + * select-option-filled-success-disabled-background-color: + * select-option-filled-success-disabled-text-color: + * select-option-filled-info-background-color: + * select-option-filled-info-text-color: + * select-option-filled-info-selected-background-color: + * select-option-filled-info-focus-background-color: + * select-option-filled-info-hover-background-color: + * select-option-filled-info-disabled-background-color: + * select-option-filled-info-disabled-text-color: + * select-option-filled-warning-background-color: + * select-option-filled-warning-text-color: + * select-option-filled-warning-selected-background-color: + * select-option-filled-warning-focus-background-color: + * select-option-filled-warning-hover-background-color: + * select-option-filled-warning-disabled-background-color: + * select-option-filled-warning-disabled-text-color: + * select-option-filled-danger-background-color: + * select-option-filled-danger-text-color: + * select-option-filled-danger-selected-background-color: + * select-option-filled-danger-focus-background-color: + * select-option-filled-danger-hover-background-color: + * select-option-filled-danger-disabled-background-color: + * select-option-filled-danger-disabled-text-color: + * select-hero-left-background-color: + * select-hero-right-background-color: + * select-hero-border-color: + * select-hero-border-style: + * select-hero-border-width: + * select-hero-text-color: + * select-hero-placeholder-text-color: + * select-hero-focus-left-background-color: + * select-hero-focus-right-background-color: + * select-hero-hover-left-background-color: + * select-hero-hover-right-background-color: + * select-hero-disabled-left-background-color: + * select-hero-disabled-right-background-color: + * select-hero-disabled-text-color: + * select-hero-tiny-padding: + * select-hero-small-padding: + * select-hero-medium-padding: + * select-hero-large-padding: + * select-hero-giant-padding: + * select-hero-primary-left-background-color: + * select-hero-primary-right-background-color: + * select-hero-primary-text-color: + * select-hero-primary-placeholder-text-color: + * select-hero-primary-focus-left-background-color: + * select-hero-primary-focus-right-background-color: + * select-hero-primary-hover-left-background-color: + * select-hero-primary-hover-right-background-color: + * select-hero-primary-disabled-left-background-color: + * select-hero-primary-disabled-right-background-color: + * select-hero-primary-disabled-text-color: + * select-hero-success-left-background-color: + * select-hero-success-right-background-color: + * select-hero-success-text-color: + * select-hero-success-placeholder-text-color: + * select-hero-success-focus-left-background-color: + * select-hero-success-focus-right-background-color: + * select-hero-success-hover-left-background-color: + * select-hero-success-hover-right-background-color: + * select-hero-success-disabled-left-background-color: + * select-hero-success-disabled-right-background-color: + * select-hero-success-disabled-text-color: + * select-hero-info-left-background-color: + * select-hero-info-right-background-color: + * select-hero-info-text-color: + * select-hero-info-placeholder-text-color: + * select-hero-info-focus-left-background-color: + * select-hero-info-focus-right-background-color: + * select-hero-info-hover-left-background-color: + * select-hero-info-hover-right-background-color: + * select-hero-info-disabled-left-background-color: + * select-hero-info-disabled-right-background-color: + * select-hero-info-disabled-text-color: + * select-hero-warning-left-background-color: + * select-hero-warning-right-background-color: + * select-hero-warning-text-color: + * select-hero-warning-placeholder-text-color: + * select-hero-warning-focus-left-background-color: + * select-hero-warning-focus-right-background-color: + * select-hero-warning-hover-left-background-color: + * select-hero-warning-hover-right-background-color: + * select-hero-warning-disabled-left-background-color: + * select-hero-warning-disabled-right-background-color: + * select-hero-warning-disabled-text-color: + * select-hero-danger-left-background-color: + * select-hero-danger-right-background-color: + * select-hero-danger-text-color: + * select-hero-danger-placeholder-text-color: + * select-hero-danger-focus-left-background-color: + * select-hero-danger-focus-right-background-color: + * select-hero-danger-hover-left-background-color: + * select-hero-danger-hover-right-background-color: + * select-hero-danger-disabled-left-background-color: + * select-hero-danger-disabled-right-background-color: + * select-hero-danger-disabled-text-color: + * select-option-hero-background-color: + * select-option-hero-text-color: + * select-option-hero-selected-background-color: + * select-option-hero-focus-background-color: + * select-option-hero-hover-background-color: + * select-option-hero-disabled-background-color: + * select-option-hero-disabled-text-color: + * select-option-hero-tiny-padding: + * select-group-option-hero-tiny-padding-start: + * select-option-hero-small-padding: + * select-group-option-hero-small-padding-start: + * select-option-hero-medium-padding: + * select-group-option-hero-medium-padding-start: + * select-option-hero-large-padding: + * select-group-option-hero-large-padding-start: + * select-option-hero-giant-padding: + * select-group-option-hero-giant-padding-start: + * select-option-hero-primary-background-color: + * select-option-hero-primary-text-color: + * select-option-hero-primary-selected-background-color: + * select-option-hero-primary-focus-background-color: + * select-option-hero-primary-hover-background-color: + * select-option-hero-primary-disabled-background-color: + * select-option-hero-primary-disabled-text-color: + * select-option-hero-success-background-color: + * select-option-hero-success-text-color: + * select-option-hero-success-selected-background-color: + * select-option-hero-success-focus-background-color: + * select-option-hero-success-hover-background-color: + * select-option-hero-success-disabled-background-color: + * select-option-hero-success-disabled-text-color: + * select-option-hero-info-background-color: + * select-option-hero-info-text-color: + * select-option-hero-info-selected-background-color: + * select-option-hero-info-focus-background-color: + * select-option-hero-info-hover-background-color: + * select-option-hero-info-disabled-background-color: + * select-option-hero-info-disabled-text-color: + * select-option-hero-warning-background-color: + * select-option-hero-warning-text-color: + * select-option-hero-warning-selected-background-color: + * select-option-hero-warning-focus-background-color: + * select-option-hero-warning-hover-background-color: + * select-option-hero-warning-disabled-background-color: + * select-option-hero-warning-disabled-text-color: + * select-option-hero-danger-background-color: + * select-option-hero-danger-text-color: + * select-option-hero-danger-selected-background-color: + * select-option-hero-danger-focus-background-color: + * select-option-hero-danger-hover-background-color: + * select-option-hero-danger-disabled-background-color: + * select-option-hero-danger-disabled-text-color: * */ @Component({ selector: 'nb-select', From 4648cedcf721776f185ac690bdffebc6ad0efa62 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Thu, 18 Apr 2019 22:14:08 +0300 Subject: [PATCH 34/57] fix(select): correct file path --- src/playground/with-layout/select/select-routing.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/playground/with-layout/select/select-routing.module.ts b/src/playground/with-layout/select/select-routing.module.ts index 0c66a5d20e..79d43a4185 100644 --- a/src/playground/with-layout/select/select-routing.module.ts +++ b/src/playground/with-layout/select/select-routing.module.ts @@ -19,7 +19,7 @@ import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; import { SelectSizesComponent } from './select-sizes.component'; import { SelectStatusComponent } from './select-status.component'; -import { SelectInteractiveComponent } from 'playground/with-layout/select/select-interactive.component'; +import { SelectInteractiveComponent } from './select-interactive.component'; const routes: Route[] = [ { From 02144b0708f67992b0f0bcd9cf62e812eb565ced Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 19:01:07 +0300 Subject: [PATCH 35/57] fix(select): align text to start --- .../theme/components/select/select.component.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index 5b7db8a22f..5ab26af6de 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -9,6 +9,11 @@ :host { display: block; + .select-button { + @include nb-ltr(text-align, left); + @include nb-rtl(text-align, right); + } + .select-button.bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -24,8 +29,8 @@ width: 100%; overflow: hidden; text-overflow: ellipsis; - white-space: nowrap; text-transform: none; + white-space: nowrap; @include nb-component-animation(background-color, border-color, border-radius, box-shadow, color); } From 1de27edabb4ce96ca1ae1a8a4f6f77a7a3da6302 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 19:12:53 +0300 Subject: [PATCH 36/57] docs(select): show appearance name --- .../with-layout/select/select-interactive.component.html | 5 +++-- .../with-layout/select/select-interactive.component.scss | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/playground/with-layout/select/select-interactive.component.html b/src/playground/with-layout/select/select-interactive.component.html index c09e203aa5..ea4dab2909 100644 --- a/src/playground/with-layout/select/select-interactive.component.html +++ b/src/playground/with-layout/select/select-interactive.component.html @@ -1,4 +1,4 @@ - +
Select shape: @@ -18,7 +18,8 @@ - + + {{ appearance }} Date: Fri, 19 Apr 2019 21:45:00 +0300 Subject: [PATCH 37/57] fix(select): change icons size with font size --- src/framework/theme/components/select/select.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index 5ab26af6de..e145de26a3 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -36,6 +36,7 @@ } nb-icon { + font-size: 1em; position: absolute; top: 50%; transform: translateY(-50%); From f08db6940e8e5e0f910c81083415592530970492 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:06:14 +0300 Subject: [PATCH 38/57] feat(select): add min width theme property --- .../theme/components/select/_select.component.theme.scss | 1 + src/framework/theme/components/select/select.component.scss | 2 +- src/framework/theme/styles/themes/_default.scss | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 4e32c521a4..aa42d4b747 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -11,6 +11,7 @@ @mixin nb-select-theme() { nb-select { .select-button { + min-width: nb-theme(select-min-width); cursor: nb-theme(select-cursor); &:focus { diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index e145de26a3..b9dcb52b09 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -7,7 +7,7 @@ @import '../../styles/core/mixins'; :host { - display: block; + display: inline-block; .select-button { @include nb-ltr(text-align, left); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 3d83876d78..0c8ba04224 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1365,6 +1365,7 @@ $theme: ( select-cursor: pointer, select-disabled-cursor: default, + select-min-width: 10rem, select-options-list-max-height: 20rem, select-outline-width: outline-width, select-outline-color: outline-color, From ddc5625d499306c9a3b8739e6d95bb2c62d7f62c Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:11:05 +0300 Subject: [PATCH 39/57] fix(select): add missing full width class --- .../theme/components/select/select.component.scss | 4 ++++ .../theme/components/select/select.component.ts | 1 + src/framework/theme/components/select/select.spec.ts | 9 +++++++++ 3 files changed, 14 insertions(+) diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index b9dcb52b09..d431fafd22 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -24,6 +24,10 @@ } } +:host(.full-width) { + width: 100%; +} + .select-button { position: relative; width: 100%; diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 1a26a3fb0a..ec5110ca6b 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -543,6 +543,7 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent * If set element will fill its container */ @Input() + @HostBinding('class.full-width') get fullWidth(): boolean { return this._fullWidth; } diff --git a/src/framework/theme/components/select/select.spec.ts b/src/framework/theme/components/select/select.spec.ts index 920adbaf51..f912f238b2 100644 --- a/src/framework/theme/components/select/select.spec.ts +++ b/src/framework/theme/components/select/select.spec.ts @@ -7,6 +7,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing'; import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { By } from '@angular/platform-browser'; import { RouterTestingModule } from '@angular/router/testing'; import { from, zip } from 'rxjs'; import createSpy = jasmine.createSpy; @@ -622,6 +623,14 @@ describe('NbSelectComponent - falsy values', () => { expect(select.selectionModel.length).toEqual(1); })); + it('should set class if fullWidth input set to true', () => { + select.fullWidth = true; + fixture.detectChanges(); + + const button = fixture.debugElement.query(By.directive(NbSelectComponent)); + expect(button.classes['full-width']).toEqual(true); + }); + describe('multiple', () => { beforeEach(fakeAsync(() => { fixture = TestBed.createComponent(NbMultipleSelectWithFalsyOptionValuesComponent); From c47dd874dacb49398b2d367572710e3a98d26d0a Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:15:56 +0300 Subject: [PATCH 40/57] feat(select): add min width theme property --- src/framework/theme/components/select/select.component.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index d431fafd22..89aed27b9b 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -8,6 +8,7 @@ :host { display: inline-block; + max-width: 100%; .select-button { @include nb-ltr(text-align, left); From b26e29207473c58fb7e257eebf6cca8167881a88 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:16:21 +0300 Subject: [PATCH 41/57] fix(select): change icon placement based on document direction --- .../theme/components/select/select.component.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index 89aed27b9b..bc5c888e10 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -11,8 +11,16 @@ max-width: 100%; .select-button { - @include nb-ltr(text-align, left); - @include nb-rtl(text-align, right); + @include nb-ltr(text-align, left) { + nb-icon { + right: 0.2em; + } + } + @include nb-rtl(text-align, right) { + nb-icon { + left: 0.2em; + } + } } .select-button.bottom { From 2a7b14780b8b4fe53182cb0a08d8e68a5824be24 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:35:56 +0300 Subject: [PATCH 42/57] docs(select interactive example): put configuration card on own row --- .../select/select-interactive.component.html | 40 ++++++++++++++----- .../select/select-interactive.component.scss | 30 +++++++++++--- .../select/select-interactive.component.ts | 5 +++ 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/src/playground/with-layout/select/select-interactive.component.html b/src/playground/with-layout/select/select-interactive.component.html index ea4dab2909..99d8c984e4 100644 --- a/src/playground/with-layout/select/select-interactive.component.html +++ b/src/playground/with-layout/select/select-interactive.component.html @@ -1,33 +1,35 @@ - - + +
- Select shape: + Shape: {{ shape }}
- Select size: + Size: {{ size }}
- + + {{ appearance }} - + + [shape]="selectedShape" + [fullWidth]="fullWidth"> Reset value Option 1 Option 2 @@ -43,7 +45,14 @@ - + Reset Option 1 Option 2 @@ -59,9 +68,20 @@ - + + - + Option 1 diff --git a/src/playground/with-layout/select/select-interactive.component.scss b/src/playground/with-layout/select/select-interactive.component.scss index 3541c67051..fc09a971e9 100644 --- a/src/playground/with-layout/select/select-interactive.component.scss +++ b/src/playground/with-layout/select/select-interactive.component.scss @@ -9,18 +9,38 @@ nb-card { margin: 0.5rem; &.configuration { - flex: 0 1 auto; + flex: 1 0 100%; } } +.configuration .controls-container { + margin: 0 -0.5rem; + + > * { + margin: 0 0.5rem; + } +} + +fieldset { + border: 0; +} + +nb-radio-group { + display: flex; + flex-wrap: wrap; +} + .appearance-name { text-transform: capitalize; } -nb-select { - margin: 1rem 0; +.select-column { + display: flex; + flex-direction: column; + align-items: start; + margin: -0.5rem 0; } -fieldset { - border: 0; +nb-select { + margin: 0.5rem 0; } diff --git a/src/playground/with-layout/select/select-interactive.component.ts b/src/playground/with-layout/select/select-interactive.component.ts index ef5012bd40..72b897b7d6 100644 --- a/src/playground/with-layout/select/select-interactive.component.ts +++ b/src/playground/with-layout/select/select-interactive.component.ts @@ -27,9 +27,14 @@ export class SelectInteractiveComponent { sizes: NbComponentSize[] = ['tiny', 'small', 'medium', 'large', 'giant']; selectedShape: NbComponentShape = 'rectangle'; shapes: NbComponentShape[] = ['rectangle', 'semi-round', 'round']; + fullWidth: boolean = false; selectDisabledOption(): void { this.singleSelectValue = this.disabledOptionValue; this.multipleSelectValue = [this.disabledOptionValue]; } + + toggleFullWidth(): void { + this.fullWidth = !this.fullWidth; + } } From 15a38e3fce8cb55e874134807e5e64e3905dc0c7 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:39:47 +0300 Subject: [PATCH 43/57] feat(select): increase min width --- src/framework/theme/styles/themes/_default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 0c8ba04224..41350e3a9c 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1365,7 +1365,7 @@ $theme: ( select-cursor: pointer, select-disabled-cursor: default, - select-min-width: 10rem, + select-min-width: 13rem, select-options-list-max-height: 20rem, select-outline-width: outline-width, select-outline-color: outline-color, From 75185f8c00e82ec694c937b616e7df7334419973 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 22:42:58 +0300 Subject: [PATCH 44/57] docs(select): include interactive example into docs --- src/framework/theme/components/select/select.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index ec5110ca6b..609c315a89 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -134,6 +134,7 @@ export class NbSelectLabelComponent { * * @stacked-example(Select shapes, select/select-shapes.component) * + * @additional-example(Interactive, select/select-interactive.component) * * @styles * From 928b41313a2d0619a4ff490ad9c93e5747326e18 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 23:09:06 +0300 Subject: [PATCH 45/57] docs(select interactive): fix scrolling --- .../with-layout/select/select-interactive.component.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/playground/with-layout/select/select-interactive.component.scss b/src/playground/with-layout/select/select-interactive.component.scss index fc09a971e9..40bf4332c1 100644 --- a/src/playground/with-layout/select/select-interactive.component.scss +++ b/src/playground/with-layout/select/select-interactive.component.scss @@ -38,9 +38,15 @@ nb-radio-group { display: flex; flex-direction: column; align-items: start; - margin: -0.5rem 0; } nb-select { margin: 0.5rem 0; + + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } } From 43a3c983ce87fb1bd17c6f4b672a0ea0f3b211bf Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 23:38:21 +0300 Subject: [PATCH 46/57] refactor(select): make option look same across appearances --- .../components/select/_select-filled.scss | 46 ------- .../theme/components/select/_select-hero.scss | 46 ------- .../components/select/_select-outline.scss | 23 ---- .../select/_select.component.theme.scss | 33 ++++- .../theme/styles/themes/_default.scss | 127 +++--------------- 5 files changed, 45 insertions(+), 230 deletions(-) diff --git a/src/framework/theme/components/select/_select-filled.scss b/src/framework/theme/components/select/_select-filled.scss index c2d2a8765b..bc98da8b4b 100644 --- a/src/framework/theme/components/select/_select-filled.scss +++ b/src/framework/theme/components/select/_select-filled.scss @@ -39,29 +39,6 @@ } } - .appearance-filled nb-option-group, - .appearance-filled nb-option { - background-color: nb-theme(select-option-filled-background-color); - color: nb-theme(select-option-filled-text-color); - - &[disabled] { - background-color: nb-theme(select-option-filled-disabled-background-color); - color: nb-theme(select-option-filled-disabled-text-color); - } - } - - .appearance-filled nb-option { - &.selected { - background-color: nb-theme(select-option-filled-selected-background-color); - } - &:focus { - background-color: nb-theme(select-option-filled-focus-background-color); - } - &:hover { - background-color: nb-theme(select-option-filled-hover-background-color); - } - } - @each $status in nb-get-statuses() { nb-select.appearance-filled.status-#{$status} .select-button { background-color: nb-theme(select-filled-#{$status}-background-color); @@ -85,28 +62,5 @@ border-color: nb-theme(select-filled-#{$status}-disabled-border-color); } } - - .appearance-filled.status-#{$status} nb-option-group, - .appearance-filled.status-#{$status} nb-option { - background-color: nb-theme(select-option-filled-#{$status}-background-color); - color: nb-theme(select-option-filled-#{$status}-text-color); - - &[disabled] { - background-color: nb-theme(select-option-filled-#{$status}-disabled-background-color); - color: nb-theme(select-option-filled-#{$status}-disabled-text-color); - } - } - - .appearance-filled.status-#{$status} nb-option { - &.selected { - background-color: nb-theme(select-option-filled-#{$status}-selected-background-color); - } - &:focus { - background-color: nb-theme(select-option-filled-#{$status}-focus-background-color); - } - &:hover { - background-color: nb-theme(select-option-filled-#{$status}-hover-background-color); - } - } } } diff --git a/src/framework/theme/components/select/_select-hero.scss b/src/framework/theme/components/select/_select-hero.scss index 04ae83f87e..290ac19a0e 100644 --- a/src/framework/theme/components/select/_select-hero.scss +++ b/src/framework/theme/components/select/_select-hero.scss @@ -45,29 +45,6 @@ } } - .appearance-hero nb-option-group, - .appearance-hero nb-option { - background-color: nb-theme(select-option-hero-background-color); - color: nb-theme(select-option-hero-text-color); - - &[disabled] { - background-color: nb-theme(select-option-hero-disabled-background-color); - color: nb-theme(select-option-hero-disabled-text-color); - } - } - - .appearance-hero nb-option { - &.selected { - background-color: nb-theme(select-option-hero-selected-background-color); - } - &:focus { - background-color: nb-theme(select-option-hero-focus-background-color); - } - &:hover { - background-color: nb-theme(select-option-hero-hover-background-color); - } - } - @each $status in nb-get-statuses() { nb-select.appearance-hero.status-#{$status} .select-button { $left-color: nb-theme(select-hero-#{$status}-left-background-color); @@ -96,28 +73,5 @@ background-image: linear-gradient(to right, $left-color, $right-color); } } - - .appearance-hero.status-#{$status} nb-option-group, - .appearance-hero.status-#{$status} nb-option { - background-color: nb-theme(select-option-hero-#{$status}-background-color); - color: nb-theme(select-option-hero-#{$status}-text-color); - - &[disabled] { - background-color: nb-theme(select-option-hero-#{$status}-disabled-background-color); - color: nb-theme(select-option-hero-#{$status}-disabled-text-color); - } - } - - .appearance-hero.status-#{$status} nb-option { - &.selected { - background-color: nb-theme(select-option-hero-#{$status}-selected-background-color); - } - &:focus { - background-color: nb-theme(select-option-hero-#{$status}-focus-background-color); - } - &:hover { - background-color: nb-theme(select-option-hero-#{$status}-hover-background-color); - } - } } } diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss index 7beb9b2399..38bed4065c 100644 --- a/src/framework/theme/components/select/_select-outline.scss +++ b/src/framework/theme/components/select/_select-outline.scss @@ -52,27 +52,4 @@ } } } - - .appearance-outline nb-option-group, - .appearance-outline nb-option { - background-color: nb-theme(select-option-outline-background-color); - color: nb-theme(select-option-outline-text-color); - - &[disabled] { - background-color: nb-theme(select-option-outline-disabled-background-color); - color: nb-theme(select-option-outline-disabled-text-color); - } - } - - .appearance-outline nb-option { - &.selected { - background-color: nb-theme(select-option-outline-selected-background-color); - } - &:focus { - background-color: nb-theme(select-option-outline-focus-background-color); - } - &:hover { - background-color: nb-theme(select-option-outline-hover-background-color); - } - } } diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index aa42d4b747..26fb84d1dc 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -14,6 +14,9 @@ min-width: nb-theme(select-min-width); cursor: nb-theme(select-cursor); + &.placeholder { + font-weight: nb-theme(select-placeholder-text-font-weight); + } &:focus { box-shadow: 0 0 0 nb-theme(select-outline-width) nb-theme(select-outline-color); outline: none; @@ -54,10 +57,6 @@ font-weight: nb-theme(select-text-font-weight); } - nb-select .placeholder { - font-weight: nb-theme(select-placeholder-text-font-weight); - } - @each $size in nb-get-sizes() { nb-select.size-#{$size} .select-button, .size-#{$size} nb-option { @@ -83,6 +82,32 @@ } } + nb-option-group, + nb-option { + background-color: nb-theme(select-option-background-color); + color: nb-theme(select-option-text-color); + + &[disabled] { + background-color: nb-theme(select-option-disabled-background-color); + color: nb-theme(select-option-disabled-text-color); + } + } + + nb-option { + &.selected { + background-color: nb-theme(select-option-selected-background-color); + color: nb-theme(select-option-selected-text-color); + } + &:focus { + background-color: nb-theme(select-option-focus-background-color); + color: nb-theme(select-option-focus-text-color); + } + &:hover { + background-color: nb-theme(select-option-hover-background-color); + color: nb-theme(select-option-hover-text-color); + } + } + @include select-outline; @include select-filled; @include select-hero; diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index 41350e3a9c..cb6880aa9a 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1374,6 +1374,17 @@ $theme: ( select-text-font-weight: text-subtitle-font-weight, select-placeholder-text-font-weight: text-paragraph-font-weight, + select-option-background-color: color-white, + select-option-text-color: text-dark-color, + select-option-selected-background-color: color-white, + select-option-selected-text-color: text-primary-color, + select-option-focus-background-color: color-white, + select-option-focus-text-color: text-primary-focus-color, + select-option-hover-background-color: color-white, + select-option-hover-text-color: text-primary-hover-color, + select-option-disabled-background-color: color-white, + select-option-disabled-text-color: text-disabled-color, + select-tiny-text-font-size: text-button-tiny-font-size, select-tiny-text-line-height: text-button-tiny-line-height, select-small-text-font-size: text-button-small-font-size, @@ -1428,25 +1439,17 @@ $theme: ( select-outline-danger-focus-border-color: color-danger-focus, select-outline-danger-hover-border-color: color-danger-hover, - select-option-outline-background-color: color-basic-100, - select-option-outline-text-color: text-dark-color, - select-option-outline-tiny-padding: select-outline-tiny-padding, - select-group-option-outline-tiny-start-padding: 1.25rem, select-option-outline-small-padding: select-outline-small-padding, - select-group-option-outline-small-start-padding: 1.75rem, select-option-outline-medium-padding: select-outline-medium-padding, - select-group-option-outline-medium-start-padding: 2.25rem, select-option-outline-large-padding: select-outline-large-padding, - select-group-option-outline-large-start-padding: 2.25rem, select-option-outline-giant-padding: select-outline-giant-padding, - select-group-option-outline-giant-start-padding: 2.75rem, - select-option-outline-selected-background-color: color-basic-active, - select-option-outline-focus-background-color: color-basic-focus, - select-option-outline-hover-background-color: color-basic-hover, - select-option-outline-disabled-background-color: color-basic-disabled, - select-option-outline-disabled-text-color: text-disabled-color, + select-group-option-outline-tiny-start-padding: 1.25rem, + select-group-option-outline-small-start-padding: 1.75rem, + select-group-option-outline-medium-start-padding: 2.25rem, + select-group-option-outline-large-start-padding: 2.25rem, + select-group-option-outline-giant-start-padding: 2.75rem, select-filled-background-color: color-basic-100, select-filled-border-color: color-basic-100, @@ -1528,15 +1531,6 @@ $theme: ( select-filled-danger-disabled-background-color: color-danger-disabled, select-filled-danger-disabled-border-color: color-danger-disabled, - select-option-filled-background-color: color-basic-100, - select-option-filled-text-color: text-dark-color, - - select-option-filled-selected-background-color: color-basic-active, - select-option-filled-focus-background-color: color-basic-focus, - select-option-filled-hover-background-color: color-basic-hover, - select-option-filled-disabled-background-color: color-basic-disabled, - select-option-filled-disabled-text-color: text-disabled-color, - select-option-filled-tiny-padding: select-filled-tiny-padding, select-group-option-filled-tiny-padding-start: 1.125rem, select-option-filled-small-padding: select-filled-small-padding, @@ -1548,46 +1542,6 @@ $theme: ( select-option-filled-giant-padding: select-filled-giant-padding, select-group-option-filled-giant-padding-start: 2.75rem, - select-option-filled-primary-background-color: color-primary, - select-option-filled-primary-text-color: text-light-color, - select-option-filled-primary-selected-background-color: color-primary-active, - select-option-filled-primary-focus-background-color: color-primary-focus, - select-option-filled-primary-hover-background-color: color-primary-hover, - select-option-filled-primary-disabled-background-color: color-primary-disabled, - select-option-filled-primary-disabled-text-color: text-disabled-color, - - select-option-filled-success-background-color: color-success, - select-option-filled-success-text-color: text-light-color, - select-option-filled-success-selected-background-color: color-success-active, - select-option-filled-success-focus-background-color: color-success-focus, - select-option-filled-success-hover-background-color: color-success-hover, - select-option-filled-success-disabled-background-color: color-success-disabled, - select-option-filled-success-disabled-text-color: text-disabled-color, - - select-option-filled-info-background-color: color-info, - select-option-filled-info-text-color: text-light-color, - select-option-filled-info-selected-background-color: color-info-active, - select-option-filled-info-focus-background-color: color-info-focus, - select-option-filled-info-hover-background-color: color-info-hover, - select-option-filled-info-disabled-background-color: color-info-disabled, - select-option-filled-info-disabled-text-color: text-disabled-color, - - select-option-filled-warning-background-color: color-warning, - select-option-filled-warning-text-color: text-light-color, - select-option-filled-warning-selected-background-color: color-warning-active, - select-option-filled-warning-focus-background-color: color-warning-focus, - select-option-filled-warning-hover-background-color: color-warning-hover, - select-option-filled-warning-disabled-background-color: color-warning-disabled, - select-option-filled-warning-disabled-text-color: text-disabled-color, - - select-option-filled-danger-background-color: color-danger, - select-option-filled-danger-text-color: text-light-color, - select-option-filled-danger-selected-background-color: color-danger-active, - select-option-filled-danger-focus-background-color: color-danger-focus, - select-option-filled-danger-hover-background-color: color-danger-hover, - select-option-filled-danger-disabled-background-color: color-danger-disabled, - select-option-filled-danger-disabled-text-color: text-disabled-color, - select-hero-left-background-color: color-basic-400, select-hero-right-background-color: color-basic, select-hero-border-color: transparent, @@ -1675,15 +1629,6 @@ $theme: ( select-hero-danger-disabled-right-background-color: color-danger-200, select-hero-danger-disabled-text-color: text-disabled-color, - select-option-hero-background-color: color-basic-100, - select-option-hero-text-color: text-dark-color, - - select-option-hero-selected-background-color: color-basic-active, - select-option-hero-focus-background-color: color-basic-focus, - select-option-hero-hover-background-color: color-basic-hover, - select-option-hero-disabled-background-color: color-basic-disabled, - select-option-hero-disabled-text-color: text-disabled-color, - select-option-hero-tiny-padding: select-hero-tiny-padding, select-group-option-hero-tiny-padding-start: 1.125rem, select-option-hero-small-padding: select-hero-small-padding, @@ -1695,46 +1640,6 @@ $theme: ( select-option-hero-giant-padding: select-hero-giant-padding, select-group-option-hero-giant-padding-start: 2.75rem, - select-option-hero-primary-background-color: color-primary, - select-option-hero-primary-text-color: text-light-color, - select-option-hero-primary-selected-background-color: color-primary-active, - select-option-hero-primary-focus-background-color: color-primary-focus, - select-option-hero-primary-hover-background-color: color-primary-hover, - select-option-hero-primary-disabled-background-color: color-primary-disabled, - select-option-hero-primary-disabled-text-color: text-disabled-color, - - select-option-hero-success-background-color: color-success, - select-option-hero-success-text-color: text-light-color, - select-option-hero-success-selected-background-color: color-success-active, - select-option-hero-success-focus-background-color: color-success-focus, - select-option-hero-success-hover-background-color: color-success-hover, - select-option-hero-success-disabled-background-color: color-success-disabled, - select-option-hero-success-disabled-text-color: text-disabled-color, - - select-option-hero-info-background-color: color-info, - select-option-hero-info-text-color: text-light-color, - select-option-hero-info-selected-background-color: color-info-active, - select-option-hero-info-focus-background-color: color-info-focus, - select-option-hero-info-hover-background-color: color-info-hover, - select-option-hero-info-disabled-background-color: color-info-disabled, - select-option-hero-info-disabled-text-color: text-disabled-color, - - select-option-hero-warning-background-color: color-warning, - select-option-hero-warning-text-color: text-light-color, - select-option-hero-warning-selected-background-color: color-warning-active, - select-option-hero-warning-focus-background-color: color-warning-focus, - select-option-hero-warning-hover-background-color: color-warning-hover, - select-option-hero-warning-disabled-background-color: color-warning-disabled, - select-option-hero-warning-disabled-text-color: text-disabled-color, - - select-option-hero-danger-background-color: color-danger, - select-option-hero-danger-text-color: text-light-color, - select-option-hero-danger-selected-background-color: color-danger-active, - select-option-hero-danger-focus-background-color: color-danger-focus, - select-option-hero-danger-hover-background-color: color-danger-hover, - select-option-hero-danger-disabled-background-color: color-danger-disabled, - select-option-hero-danger-disabled-text-color: text-disabled-color, - datepicker-text-color: text-dark-color, datepicker-background-color: color-white, datepicker-border-color: color-primary, From fb1293a98d2487ab58b151aabe0f5f74beefef2d Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 23:48:57 +0300 Subject: [PATCH 47/57] refactor(select): make option look same across appearances --- src/framework/theme/components/select/select.component.scss | 2 +- src/framework/theme/styles/themes/_default.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/framework/theme/components/select/select.component.scss b/src/framework/theme/components/select/select.component.scss index bc5c888e10..794a05c237 100644 --- a/src/framework/theme/components/select/select.component.scss +++ b/src/framework/theme/components/select/select.component.scss @@ -49,7 +49,7 @@ } nb-icon { - font-size: 1em; + font-size: 1.5em; position: absolute; top: 50%; transform: translateY(-50%); diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index cb6880aa9a..23f0f46bce 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -1389,8 +1389,8 @@ $theme: ( select-tiny-text-line-height: text-button-tiny-line-height, select-small-text-font-size: text-button-small-font-size, select-small-text-line-height: text-button-small-line-height, - select-medium-text-font-size: text-button-medium-font-size, - select-medium-text-line-height: text-button-medium-line-height, + select-medium-text-font-size: text-subtitle-2-font-size, + select-medium-text-line-height: text-subtitle-2-line-height, select-large-text-font-size: text-button-large-font-size, select-large-text-line-height: text-button-large-line-height, select-giant-text-font-size: text-button-giant-font-size, From 62b7c05be8d3c3f0d8f0b0bcf9f60201abf5b4bd Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Fri, 19 Apr 2019 23:52:33 +0300 Subject: [PATCH 48/57] docs(select): refactor interactive example --- .../select/select-interactive.component.html | 2 +- .../select/select-interactive.component.ts | 15 +++++++-------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/src/playground/with-layout/select/select-interactive.component.html b/src/playground/with-layout/select/select-interactive.component.html index 99d8c984e4..a71b01028f 100644 --- a/src/playground/with-layout/select/select-interactive.component.html +++ b/src/playground/with-layout/select/select-interactive.component.html @@ -19,7 +19,7 @@ - + {{ appearance }} Date: Mon, 22 Apr 2019 14:21:25 +0300 Subject: [PATCH 49/57] refactor(select): add parentheses Co-Authored-By: yggg --- .../theme/components/select/_select.component.theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 26fb84d1dc..3569bee022 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -108,7 +108,7 @@ } } - @include select-outline; + @include select-outline(); @include select-filled; @include select-hero; } From 3fc377b79d679195e8a3dde8af3dde34d33f3163 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 22 Apr 2019 14:45:53 +0300 Subject: [PATCH 50/57] docs(select): update sizes example --- .../select/select-sizes.component.html | 23 +------------------ .../select/select-sizes.component.ts | 2 ++ 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/src/playground/with-layout/select/select-sizes.component.html b/src/playground/with-layout/select/select-sizes.component.html index 8359ba6e00..95a44d2309 100644 --- a/src/playground/with-layout/select/select-sizes.component.html +++ b/src/playground/with-layout/select/select-sizes.component.html @@ -1,27 +1,6 @@ - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - - Option 1 - Option 2 - Option 3 - Option 4 - - - + Option 1 Option 2 Option 3 diff --git a/src/playground/with-layout/select/select-sizes.component.ts b/src/playground/with-layout/select/select-sizes.component.ts index 09172db7da..c6347f9622 100644 --- a/src/playground/with-layout/select/select-sizes.component.ts +++ b/src/playground/with-layout/select/select-sizes.component.ts @@ -5,6 +5,7 @@ */ import { Component } from '@angular/core'; +import { NbComponentSize } from '@nebular/theme'; @Component({ selector: 'nb-select-sizes', @@ -16,4 +17,5 @@ import { Component } from '@angular/core'; `], }) export class SelectSizesComponent { + sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; } From d4b61585ab63160e21660230d1dc975ecebb9aec Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 22 Apr 2019 15:02:27 +0300 Subject: [PATCH 51/57] docs(select): remove status from placeholder example --- .../with-layout/select/select-placeholder.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/playground/with-layout/select/select-placeholder.component.html b/src/playground/with-layout/select/select-placeholder.component.html index 7acd46a6d3..a366c35e11 100644 --- a/src/playground/with-layout/select/select-placeholder.component.html +++ b/src/playground/with-layout/select/select-placeholder.component.html @@ -1,6 +1,6 @@ - + Option 1 Option 2 Option 3 From 0890f6bc7da75c0f1a9fe4452d7a2e8e6c443dfe Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 22 Apr 2019 15:03:06 +0300 Subject: [PATCH 52/57] docs(select): add common example styles --- .../with-layout/select/select-clean.component.ts | 1 + .../with-layout/select/select-disabled.component.ts | 6 +----- src/playground/with-layout/select/select-example.scss | 9 +++++++++ .../with-layout/select/select-form.component.ts | 6 +----- .../with-layout/select/select-groups.component.ts | 1 + .../with-layout/select/select-hero.component.ts | 6 +----- .../with-layout/select/select-label.component.ts | 1 + .../with-layout/select/select-multiple.component.ts | 1 - .../with-layout/select/select-outline.component.ts | 6 +----- .../with-layout/select/select-placeholder.component.ts | 1 + .../with-layout/select/select-shapes.component.ts | 6 +----- .../with-layout/select/select-showcase.component.ts | 2 +- .../with-layout/select/select-sizes.component.ts | 6 +----- .../with-layout/select/select-status.component.ts | 6 +----- 14 files changed, 21 insertions(+), 37 deletions(-) create mode 100644 src/playground/with-layout/select/select-example.scss diff --git a/src/playground/with-layout/select/select-clean.component.ts b/src/playground/with-layout/select/select-clean.component.ts index 4ffdbbe96f..f71b2f0d56 100644 --- a/src/playground/with-layout/select/select-clean.component.ts +++ b/src/playground/with-layout/select/select-clean.component.ts @@ -9,5 +9,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-clean', templateUrl: './select-clean.component.html', + styleUrls: ['./select-example.scss'], }) export class SelectCleanComponent {} diff --git a/src/playground/with-layout/select/select-disabled.component.ts b/src/playground/with-layout/select/select-disabled.component.ts index 5561841c20..d52b484e80 100644 --- a/src/playground/with-layout/select/select-disabled.component.ts +++ b/src/playground/with-layout/select/select-disabled.component.ts @@ -9,11 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-disabled', templateUrl: './select-disabled.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectDisabledComponent { } diff --git a/src/playground/with-layout/select/select-example.scss b/src/playground/with-layout/select/select-example.scss new file mode 100644 index 0000000000..71e54ec6e4 --- /dev/null +++ b/src/playground/with-layout/select/select-example.scss @@ -0,0 +1,9 @@ +nb-card-body { + display: flex; + flex-direction: column; + align-items: start; +} + +nb-select:not(:only-child):not(:last-child) { + margin-bottom: 1rem; +} diff --git a/src/playground/with-layout/select/select-form.component.ts b/src/playground/with-layout/select/select-form.component.ts index 1a23fec02d..3f9c022bf9 100644 --- a/src/playground/with-layout/select/select-form.component.ts +++ b/src/playground/with-layout/select/select-form.component.ts @@ -10,11 +10,7 @@ import { FormControl } from '@angular/forms'; @Component({ selector: 'nb-select-form', templateUrl: './select-form.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectFormComponent { selectedItemNgModel; diff --git a/src/playground/with-layout/select/select-groups.component.ts b/src/playground/with-layout/select/select-groups.component.ts index a7bd4b8a55..4679c3fc5a 100644 --- a/src/playground/with-layout/select/select-groups.component.ts +++ b/src/playground/with-layout/select/select-groups.component.ts @@ -9,6 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-groups', templateUrl: './select-groups.component.html', + styleUrls: ['./select-example.scss'], }) export class SelectGroupsComponent { } diff --git a/src/playground/with-layout/select/select-hero.component.ts b/src/playground/with-layout/select/select-hero.component.ts index 09a66a844d..71fe58e976 100644 --- a/src/playground/with-layout/select/select-hero.component.ts +++ b/src/playground/with-layout/select/select-hero.component.ts @@ -9,11 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-hero', templateUrl: './select-hero.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectHeroComponent { } diff --git a/src/playground/with-layout/select/select-label.component.ts b/src/playground/with-layout/select/select-label.component.ts index 69ab6c646c..20d326386a 100644 --- a/src/playground/with-layout/select/select-label.component.ts +++ b/src/playground/with-layout/select/select-label.component.ts @@ -9,6 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-label-showcase', templateUrl: './select-label.component.html', + styleUrls: ['./select-example.scss'], }) export class SelectLabelShowcaseComponent { selectedItem; diff --git a/src/playground/with-layout/select/select-multiple.component.ts b/src/playground/with-layout/select/select-multiple.component.ts index 417d826e57..427f44bee2 100644 --- a/src/playground/with-layout/select/select-multiple.component.ts +++ b/src/playground/with-layout/select/select-multiple.component.ts @@ -10,6 +10,5 @@ import { Component } from '@angular/core'; selector: 'nb-select-multiple', templateUrl: './select-multiple.component.html', }) - export class SelectMultipleComponent { } diff --git a/src/playground/with-layout/select/select-outline.component.ts b/src/playground/with-layout/select/select-outline.component.ts index 1c74188ee8..63a0cbf772 100644 --- a/src/playground/with-layout/select/select-outline.component.ts +++ b/src/playground/with-layout/select/select-outline.component.ts @@ -9,11 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-outline', templateUrl: './select-outline.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectOutlineComponent { } diff --git a/src/playground/with-layout/select/select-placeholder.component.ts b/src/playground/with-layout/select/select-placeholder.component.ts index d5435c061d..0440983b74 100644 --- a/src/playground/with-layout/select/select-placeholder.component.ts +++ b/src/playground/with-layout/select/select-placeholder.component.ts @@ -9,6 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-placeholder', templateUrl: './select-placeholder.component.html', + styleUrls: ['./select-example.scss'], }) export class SelectPlaceholderComponent { } diff --git a/src/playground/with-layout/select/select-shapes.component.ts b/src/playground/with-layout/select/select-shapes.component.ts index 0b0315496f..cda59d7ed6 100644 --- a/src/playground/with-layout/select/select-shapes.component.ts +++ b/src/playground/with-layout/select/select-shapes.component.ts @@ -9,11 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-shapes', templateUrl: './select-shapes.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectShapeComponent { } diff --git a/src/playground/with-layout/select/select-showcase.component.ts b/src/playground/with-layout/select/select-showcase.component.ts index 2a3686835d..25a05c08d3 100644 --- a/src/playground/with-layout/select/select-showcase.component.ts +++ b/src/playground/with-layout/select/select-showcase.component.ts @@ -9,8 +9,8 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-showcase', templateUrl: './select-showcase.component.html', + styleUrls: ['./select-example.scss'], }) - export class SelectShowcaseComponent { selectedItem = '2'; } diff --git a/src/playground/with-layout/select/select-sizes.component.ts b/src/playground/with-layout/select/select-sizes.component.ts index c6347f9622..925bf6bba0 100644 --- a/src/playground/with-layout/select/select-sizes.component.ts +++ b/src/playground/with-layout/select/select-sizes.component.ts @@ -10,11 +10,7 @@ import { NbComponentSize } from '@nebular/theme'; @Component({ selector: 'nb-select-sizes', templateUrl: './select-sizes.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectSizesComponent { sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; diff --git a/src/playground/with-layout/select/select-status.component.ts b/src/playground/with-layout/select/select-status.component.ts index f14d13dcf3..fdcf4c1bcb 100644 --- a/src/playground/with-layout/select/select-status.component.ts +++ b/src/playground/with-layout/select/select-status.component.ts @@ -9,11 +9,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-select-status', templateUrl: './select-status.component.html', - styles: [` - nb-select { - margin-bottom: 1rem; - } - `], + styleUrls: ['./select-example.scss'], }) export class SelectStatusComponent { } From 4e12e51438d69ebb5fba76ee075612b26b348482 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 22 Apr 2019 15:16:25 +0300 Subject: [PATCH 53/57] fix(select): appearance setting --- .../theme/components/select/select.component.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 609c315a89..40ea027944 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -498,9 +498,10 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent return this.appearance === 'outline'; } set outline(value: boolean) { - this._outline = convertToBoolProperty(value); + if (convertToBoolProperty(value)) { + this.appearance = 'outline'; + } } - protected _outline: boolean = false; /** * Adds `filled` styles @@ -511,9 +512,10 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent return this.appearance === 'filled'; } set filled(value: boolean) { - this._filled = convertToBoolProperty(value); + if (convertToBoolProperty(value)) { + this.appearance = 'filled'; + } } - protected _filled: boolean = false; /** * Adds `hero` styles @@ -524,9 +526,10 @@ export class NbSelectComponent implements OnInit, AfterViewInit, AfterContent return this.appearance === 'hero'; } set hero(value: boolean) { - this._hero = convertToBoolProperty(value); + if (convertToBoolProperty(value)) { + this.appearance = 'hero'; + } } - protected _hero: boolean = false; /** * Disables the select From 8c3624fc6ece200b74d908fa8b3d74b821a68683 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 22 Apr 2019 15:20:06 +0300 Subject: [PATCH 54/57] docs(select): update sizes count --- src/framework/theme/components/select/select.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 40ea027944..5f933d7c41 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -118,7 +118,7 @@ export class NbSelectLabelComponent { * * @stacked-example(Select statuses, select/select-status.component) * - * There are four select sizes: + * There are five select sizes: * * @stacked-example(Select sizes, select/select-sizes.component) * From c665d0225991ba121a2ac8c39b2d912e826cc062 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 22 Apr 2019 15:28:26 +0300 Subject: [PATCH 55/57] docs(select): replace outline with filled Since outline is was already presented in all examples before. --- src/app/playground-components.ts | 8 ++++---- .../theme/components/select/select.component.ts | 4 ++-- ...ine.component.html => select-filled.component.html} | 10 +++++----- ...outline.component.ts => select-filled.component.ts} | 6 +++--- .../with-layout/select/select-routing.module.ts | 6 +++--- src/playground/with-layout/select/select.module.ts | 4 ++-- 6 files changed, 19 insertions(+), 19 deletions(-) rename src/playground/with-layout/select/{select-outline.component.html => select-filled.component.html} (78%) rename src/playground/with-layout/select/{select-outline.component.ts => select-filled.component.ts} (68%) diff --git a/src/app/playground-components.ts b/src/app/playground-components.ts index 30a39627f5..a3593dd3dc 100644 --- a/src/app/playground-components.ts +++ b/src/app/playground-components.ts @@ -895,10 +895,10 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [ name: 'Select Multiple', }, { - path: 'select-outline.component', - link: '/select/select-outline.component', - component: 'SelectOutlineComponent', - name: 'Select Outline', + path: 'select-filled.component', + link: '/select/select-filled.component', + component: 'SelectFilledComponent', + name: 'Select Filled', }, { path: 'select-placeholder.component', diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 5f933d7c41..5d5bd1b0e7 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -122,9 +122,9 @@ export class NbSelectLabelComponent { * * @stacked-example(Select sizes, select/select-sizes.component) * - * And two additional style types - `outline`: + * And two additional style types - `filled`: * - * @stacked-example(Outline select, select/select-outline.component) + * @stacked-example(Filled select, select/select-filled.component) * * and `hero`: * diff --git a/src/playground/with-layout/select/select-outline.component.html b/src/playground/with-layout/select/select-filled.component.html similarity index 78% rename from src/playground/with-layout/select/select-outline.component.html rename to src/playground/with-layout/select/select-filled.component.html index b1a7a1c5e9..87d8e5995b 100644 --- a/src/playground/with-layout/select/select-outline.component.html +++ b/src/playground/with-layout/select/select-filled.component.html @@ -1,34 +1,34 @@ - + Option 1 Option 2 Option 3 Option 4 - + Option 1 Option 2 Option 3 Option 4 - + Option 1 Option 2 Option 3 Option 4 - + Option 1 Option 2 Option 3 Option 4 - + Option 1 Option 2 Option 3 diff --git a/src/playground/with-layout/select/select-outline.component.ts b/src/playground/with-layout/select/select-filled.component.ts similarity index 68% rename from src/playground/with-layout/select/select-outline.component.ts rename to src/playground/with-layout/select/select-filled.component.ts index 63a0cbf772..693f185127 100644 --- a/src/playground/with-layout/select/select-outline.component.ts +++ b/src/playground/with-layout/select/select-filled.component.ts @@ -7,9 +7,9 @@ import { Component } from '@angular/core'; @Component({ - selector: 'nb-select-outline', - templateUrl: './select-outline.component.html', + selector: 'nb-select-filled', + templateUrl: './select-filled.component.html', styleUrls: ['./select-example.scss'], }) -export class SelectOutlineComponent { +export class SelectFilledComponent { } diff --git a/src/playground/with-layout/select/select-routing.module.ts b/src/playground/with-layout/select/select-routing.module.ts index 79d43a4185..7f058ac049 100644 --- a/src/playground/with-layout/select/select-routing.module.ts +++ b/src/playground/with-layout/select/select-routing.module.ts @@ -13,7 +13,7 @@ import { SelectGroupsComponent } from './select-groups.component'; import { SelectHeroComponent } from './select-hero.component'; import { SelectLabelShowcaseComponent } from './select-label.component'; import { SelectMultipleComponent } from './select-multiple.component'; -import { SelectOutlineComponent } from './select-outline.component'; +import { SelectFilledComponent } from './select-filled.component'; import { SelectPlaceholderComponent } from './select-placeholder.component'; import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; @@ -51,8 +51,8 @@ const routes: Route[] = [ component: SelectMultipleComponent, }, { - path: 'select-outline.component', - component: SelectOutlineComponent, + path: 'select-filled.component', + component: SelectFilledComponent, }, { path: 'select-placeholder.component', diff --git a/src/playground/with-layout/select/select.module.ts b/src/playground/with-layout/select/select.module.ts index 2b53700a9e..408189660e 100644 --- a/src/playground/with-layout/select/select.module.ts +++ b/src/playground/with-layout/select/select.module.ts @@ -16,7 +16,7 @@ import { SelectGroupsComponent } from './select-groups.component'; import { SelectHeroComponent } from './select-hero.component'; import { SelectLabelShowcaseComponent } from './select-label.component'; import { SelectMultipleComponent } from './select-multiple.component'; -import { SelectOutlineComponent } from './select-outline.component'; +import { SelectFilledComponent } from './select-filled.component'; import { SelectPlaceholderComponent } from './select-placeholder.component'; import { SelectShapeComponent } from './select-shapes.component'; import { SelectShowcaseComponent } from './select-showcase.component'; @@ -33,7 +33,7 @@ import { SelectInteractiveComponent } from './select-interactive.component'; SelectHeroComponent, SelectLabelShowcaseComponent, SelectMultipleComponent, - SelectOutlineComponent, + SelectFilledComponent, SelectPlaceholderComponent, SelectShapeComponent, SelectShowcaseComponent, From f20a1920ca59e7c190ad5a7ac73fad466cefbb23 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 24 Apr 2019 11:01:53 +0300 Subject: [PATCH 56/57] refactor(select): add parentheses --- .../theme/components/select/_select.component.theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/framework/theme/components/select/_select.component.theme.scss b/src/framework/theme/components/select/_select.component.theme.scss index 3569bee022..c0e84adf25 100644 --- a/src/framework/theme/components/select/_select.component.theme.scss +++ b/src/framework/theme/components/select/_select.component.theme.scss @@ -109,6 +109,6 @@ } @include select-outline(); - @include select-filled; - @include select-hero; + @include select-filled(); + @include select-hero(); } From a5091e8c75636293dbb58c64e56f1128740f7169 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Wed, 24 Apr 2019 12:14:59 +0300 Subject: [PATCH 57/57] docs(select): update theme properties list --- .../components/select/select.component.ts | 110 +++--------------- 1 file changed, 15 insertions(+), 95 deletions(-) diff --git a/src/framework/theme/components/select/select.component.ts b/src/framework/theme/components/select/select.component.ts index 5d5bd1b0e7..56712334e9 100644 --- a/src/framework/theme/components/select/select.component.ts +++ b/src/framework/theme/components/select/select.component.ts @@ -140,12 +140,23 @@ export class NbSelectLabelComponent { * * select-cursor: * select-disabled-cursor: + * select-min-width: * select-options-list-max-height: * select-outline-width: * select-outline-color: * select-text-font-family: * select-text-font-weight: * select-placeholder-text-font-weight: + * select-option-background-color: + * select-option-text-color: + * select-option-selected-background-color: + * select-option-selected-text-color: + * select-option-focus-background-color: + * select-option-focus-text-color: + * select-option-hover-background-color: + * select-option-hover-text-color: + * select-option-disabled-background-color: + * select-option-disabled-text-color: * select-tiny-text-font-size: * select-tiny-text-line-height: * select-small-text-font-size: @@ -190,23 +201,16 @@ export class NbSelectLabelComponent { * select-outline-danger-border-color: * select-outline-danger-focus-border-color: * select-outline-danger-hover-border-color: - * select-option-outline-background-color: - * select-option-outline-text-color: * select-option-outline-tiny-padding: - * select-group-option-outline-tiny-start-padding: * select-option-outline-small-padding: - * select-group-option-outline-small-start-padding: * select-option-outline-medium-padding: - * select-group-option-outline-medium-start-padding: * select-option-outline-large-padding: - * select-group-option-outline-large-start-padding: * select-option-outline-giant-padding: + * select-group-option-outline-tiny-start-padding: + * select-group-option-outline-small-start-padding: + * select-group-option-outline-medium-start-padding: + * select-group-option-outline-large-start-padding: * select-group-option-outline-giant-start-padding: - * select-option-outline-selected-background-color: - * select-option-outline-focus-background-color: - * select-option-outline-hover-background-color: - * select-option-outline-disabled-background-color: - * select-option-outline-disabled-text-color: * select-filled-background-color: * select-filled-border-color: * select-filled-border-style: @@ -274,13 +278,6 @@ export class NbSelectLabelComponent { * select-filled-danger-hover-border-color: * select-filled-danger-disabled-background-color: * select-filled-danger-disabled-border-color: - * select-option-filled-background-color: - * select-option-filled-text-color: - * select-option-filled-selected-background-color: - * select-option-filled-focus-background-color: - * select-option-filled-hover-background-color: - * select-option-filled-disabled-background-color: - * select-option-filled-disabled-text-color: * select-option-filled-tiny-padding: * select-group-option-filled-tiny-padding-start: * select-option-filled-small-padding: @@ -291,41 +288,6 @@ export class NbSelectLabelComponent { * select-group-option-filled-large-padding-start: * select-option-filled-giant-padding: * select-group-option-filled-giant-padding-start: - * select-option-filled-primary-background-color: - * select-option-filled-primary-text-color: - * select-option-filled-primary-selected-background-color: - * select-option-filled-primary-focus-background-color: - * select-option-filled-primary-hover-background-color: - * select-option-filled-primary-disabled-background-color: - * select-option-filled-primary-disabled-text-color: - * select-option-filled-success-background-color: - * select-option-filled-success-text-color: - * select-option-filled-success-selected-background-color: - * select-option-filled-success-focus-background-color: - * select-option-filled-success-hover-background-color: - * select-option-filled-success-disabled-background-color: - * select-option-filled-success-disabled-text-color: - * select-option-filled-info-background-color: - * select-option-filled-info-text-color: - * select-option-filled-info-selected-background-color: - * select-option-filled-info-focus-background-color: - * select-option-filled-info-hover-background-color: - * select-option-filled-info-disabled-background-color: - * select-option-filled-info-disabled-text-color: - * select-option-filled-warning-background-color: - * select-option-filled-warning-text-color: - * select-option-filled-warning-selected-background-color: - * select-option-filled-warning-focus-background-color: - * select-option-filled-warning-hover-background-color: - * select-option-filled-warning-disabled-background-color: - * select-option-filled-warning-disabled-text-color: - * select-option-filled-danger-background-color: - * select-option-filled-danger-text-color: - * select-option-filled-danger-selected-background-color: - * select-option-filled-danger-focus-background-color: - * select-option-filled-danger-hover-background-color: - * select-option-filled-danger-disabled-background-color: - * select-option-filled-danger-disabled-text-color: * select-hero-left-background-color: * select-hero-right-background-color: * select-hero-border-color: @@ -400,13 +362,6 @@ export class NbSelectLabelComponent { * select-hero-danger-disabled-left-background-color: * select-hero-danger-disabled-right-background-color: * select-hero-danger-disabled-text-color: - * select-option-hero-background-color: - * select-option-hero-text-color: - * select-option-hero-selected-background-color: - * select-option-hero-focus-background-color: - * select-option-hero-hover-background-color: - * select-option-hero-disabled-background-color: - * select-option-hero-disabled-text-color: * select-option-hero-tiny-padding: * select-group-option-hero-tiny-padding-start: * select-option-hero-small-padding: @@ -417,41 +372,6 @@ export class NbSelectLabelComponent { * select-group-option-hero-large-padding-start: * select-option-hero-giant-padding: * select-group-option-hero-giant-padding-start: - * select-option-hero-primary-background-color: - * select-option-hero-primary-text-color: - * select-option-hero-primary-selected-background-color: - * select-option-hero-primary-focus-background-color: - * select-option-hero-primary-hover-background-color: - * select-option-hero-primary-disabled-background-color: - * select-option-hero-primary-disabled-text-color: - * select-option-hero-success-background-color: - * select-option-hero-success-text-color: - * select-option-hero-success-selected-background-color: - * select-option-hero-success-focus-background-color: - * select-option-hero-success-hover-background-color: - * select-option-hero-success-disabled-background-color: - * select-option-hero-success-disabled-text-color: - * select-option-hero-info-background-color: - * select-option-hero-info-text-color: - * select-option-hero-info-selected-background-color: - * select-option-hero-info-focus-background-color: - * select-option-hero-info-hover-background-color: - * select-option-hero-info-disabled-background-color: - * select-option-hero-info-disabled-text-color: - * select-option-hero-warning-background-color: - * select-option-hero-warning-text-color: - * select-option-hero-warning-selected-background-color: - * select-option-hero-warning-focus-background-color: - * select-option-hero-warning-hover-background-color: - * select-option-hero-warning-disabled-background-color: - * select-option-hero-warning-disabled-text-color: - * select-option-hero-danger-background-color: - * select-option-hero-danger-text-color: - * select-option-hero-danger-selected-background-color: - * select-option-hero-danger-focus-background-color: - * select-option-hero-danger-hover-background-color: - * select-option-hero-danger-disabled-background-color: - * select-option-hero-danger-disabled-text-color: * */ @Component({ selector: 'nb-select',