UNPKG

6.92 kBTypeScriptView Raw
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 */
6import { AfterContentInit, ChangeDetectorRef, EventEmitter, OnChanges, QueryList, SimpleChanges } from '@angular/core';
7import { Subject } from 'rxjs';
8import { NbStatusService } from '../../services/status.service';
9import { NbBooleanInput } from '../helpers';
10import { NbComponentSize } from '../component-size';
11import { NbComponentShape } from '../component-shape';
12import { NbComponentOrCustomStatus } from '../component-status';
13import { NbButton } from '../button/base-button';
14import { NbButtonToggleAppearance, NbButtonToggleDirective } from './button-toggle.directive';
15import * 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 **/
85export 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}