1 | /**
|
2 | * @license
|
3 | * Copyright Akveo. All Rights Reserved.
|
4 | * Licensed under the MIT License. See License.txt in the project root for license information.
|
5 | */
|
6 | import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
|
7 | import { Subject } from 'rxjs';
|
8 | import { NbStatusService } from '../../services/status.service';
|
9 | import { NbBooleanInput } from '../helpers';
|
10 | import { NbComponentSize } from '../component-size';
|
11 | import { NbComponentShape } from '../component-shape';
|
12 | import { NbComponentOrCustomStatus } from '../component-status';
|
13 | import { NbButton } from '../button/base-button';
|
14 | import { NbButtonToggleAppearance, NbButtonToggleDirective } from './button-toggle.directive';
|
15 | import * as i0 from "@angular/core";
|
16 | /**
|
17 | * `<nb-button-group>` visually groups buttons together and allow to control buttons properties and the state as a
|
18 | * group.
|
19 | * @stacked-example(Button Group Showcase, button-group/button-group-showcase.component)
|
20 | *
|
21 | * ### Installation
|
22 | *
|
23 | * Import `NbButtonGroupModule` to your feature module.
|
24 | * ```ts
|
25 | * @NgModule({
|
26 | * imports: [
|
27 | * // ...
|
28 | * NbButtonGroupModule,
|
29 | * ],
|
30 | * })
|
31 | * export class PageModule { }
|
32 | * ```
|
33 | *
|
34 | * ### Usage
|
35 | *
|
36 | * You can use `<nb-button-group>` to group a series of `[nbButton]` or `[nbButtonToggle]` components.
|
37 | * @stacked-example(Button and Button Toggle Groups, button-group/button-and-button-toggle-groups.component)
|
38 | *
|
39 | * For a group of multiple `[nbButtonToggle]` you also can control multi-selection behavior. By default, the group
|
40 | * component allows only one pressed button toggle at a time (similar to the radio group). To be able to keep multiple
|
41 | * toggles pressed, you need to add `multiple` attributes to the `<nb-button-toggle>`.
|
42 | * @stacked-example(Button Group Multiple, button-group/button-group-multiple.component)
|
43 | *
|
44 | * To know which buttons are currently pressed listen to `(valueChange)` on the `nb-button-group`. Event
|
45 | * contains an array of values of currently pressed button toggles. You can assign a value to the
|
46 | * `[nbButtonToggle]` via the `value` input.
|
47 | * @stacked-example(Button Group Value Change, button-group/button-group-value-change.component)
|
48 | *
|
49 | * To disable a group of buttons, add a `disabled` attribute to the `<nb-button-group>`.
|
50 | * @stacked-example(Button Group Disabled, button-group/button-group-disabled.component)
|
51 | *
|
52 | * The group component controls all visual attributes of buttons such as `appearance`, `status`, `size`, `shape`.
|
53 | * You can change it via the appropriate attributes.
|
54 | *
|
55 | * Button group appearances:
|
56 | * @stacked-example(Button Group Appearances, button-group/button-group-appearances.component)
|
57 | *
|
58 | * Button group statuses:
|
59 | * @stacked-example(Button Group Statuses, button-group/button-group-statuses.component)
|
60 | *
|
61 | * Button group sizes:
|
62 | * @stacked-example(Button Group Sizes, button-group/button-group-sizes.component)
|
63 | *
|
64 | * Buttons group shapes:
|
65 | * @additional-example(Button Group Shapes, button-group/button-group-shapes.component)
|
66 | *
|
67 | * @styles
|
68 | *
|
69 | * button-group-filled-button-basic-text-color:
|
70 | * button-group-filled-button-primary-text-color:
|
71 | * button-group-filled-button-success-text-color:
|
72 | * button-group-filled-button-info-text-color:
|
73 | * button-group-filled-button-warning-text-color:
|
74 | * button-group-filled-button-danger-text-color:
|
75 | * button-group-filled-button-control-text-color:
|
76 | * button-group-filled-basic-divider-color:
|
77 | * button-group-filled-primary-divider-color:
|
78 | * button-group-filled-success-divider-color:
|
79 | * button-group-filled-info-divider-color:
|
80 | * button-group-filled-warning-divider-color:
|
81 | * button-group-filled-danger-divider-color:
|
82 | * button-group-filled-control-divider-color:
|
83 | * button-group-ghost-divider-color:
|
84 | **/
|
85 | export declare class NbButtonGroupComponent implements OnChanges, AfterContentInit {
|
86 | protected cd: ChangeDetectorRef;
|
87 | protected statusService: NbStatusService;
|
88 | protected lastEmittedValue: any[];
|
89 | protected readonly destroy$: Subject<void>;
|
90 | protected readonly buttonsChange$: Subject<NbButton[]>;
|
91 | readonly buttons: QueryList<NbButton>;
|
92 | /**
|
93 | * Button group size, available sizes:
|
94 | * `tiny`, `small`, `medium`, `large`, `giant`
|
95 | */
|
96 | size: NbComponentSize;
|
97 | /**
|
98 | * Button group status (adds specific styles):
|
99 | * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`
|
100 | */
|
101 | status: NbComponentOrCustomStatus;
|
102 | /**
|
103 | * Button group shapes: `rectangle`, `round`, `semi-round`
|
104 | */
|
105 | shape: NbComponentShape;
|
106 | /**
|
107 | * Button group appearance: `filled`, `outline`, `ghost`
|
108 | */
|
109 | appearance: NbButtonToggleAppearance;
|
110 | get disabled(): boolean;
|
111 | set disabled(value: boolean);
|
112 | protected _disabled: boolean;
|
113 | static ngAcceptInputType_disabled: NbBooleanInput;
|
114 | /**
|
115 | * Allows to keep multiple button toggles pressed. Off by default.
|
116 | */
|
117 | get multiple(): boolean;
|
118 | set multiple(value: boolean);
|
119 | protected _multiple: boolean;
|
120 | static ngAcceptInputType_multiple: NbBooleanInput;
|
121 | /**
|
122 | * Sets `filled` appearance
|
123 | */
|
124 | get filled(): boolean;
|
125 | set filled(value: boolean);
|
126 | static ngAcceptInputType_filled: NbBooleanInput;
|
127 | /**
|
128 | * Sets `outline` appearance
|
129 | */
|
130 | get outline(): boolean;
|
131 | set outline(value: boolean);
|
132 | static ngAcceptInputType_outline: NbBooleanInput;
|
133 | /**
|
134 | * Sets `ghost` appearance
|
135 | */
|
136 | get ghost(): boolean;
|
137 | set ghost(value: boolean);
|
138 | static ngAcceptInputType_ghost: NbBooleanInput;
|
139 | /**
|
140 | * Emits when `nbButtonToggle` pressed state change. `$event` contains an array of the currently pressed button
|
141 | * toggles.
|
142 | */
|
143 | valueChange: EventEmitter<any[]>;
|
144 | role: string;
|
145 | get additionalClasses(): string[];
|
146 | constructor(cd: ChangeDetectorRef, statusService: NbStatusService);
|
147 | ngOnChanges({ size, status, shape, multiple, filled, outline, ghost, disabled }: SimpleChanges): void;
|
148 | ngAfterContentInit(): void;
|
149 | protected listenButtonPressedState(buttons: NbButton[]): void;
|
150 | protected syncButtonsProperties(buttons: NbButton[]): void;
|
151 | protected emitCurrentValue(toggleButtons: NbButtonToggleDirective[]): void;
|
152 | static ɵfac: i0.ɵɵFactoryDeclaration<NbButtonGroupComponent, never>;
|
153 | static ɵcmp: i0.ɵɵComponentDeclaration<NbButtonGroupComponent, "nb-button-group", never, { "size": { "alias": "size"; "required": false; }; "status": { "alias": "status"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "ghost": { "alias": "ghost"; "required": false; }; }, { "valueChange": "valueChange"; }, ["buttons"], ["*"], false, never>;
|
154 | }
|