@ngb-bootstrap/core 0.0.0 → 0.1.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -0
- package/NOTICE +18 -0
- package/README.md +26 -0
- package/fesm2022/ngb-bootstrap-core-alert.mjs +154 -0
- package/fesm2022/ngb-bootstrap-core-alert.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-badge.mjs +100 -0
- package/fesm2022/ngb-bootstrap-core-badge.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-breadcrumb.mjs +135 -0
- package/fesm2022/ngb-bootstrap-core-breadcrumb.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-button.mjs +513 -0
- package/fesm2022/ngb-bootstrap-core-button.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-card.mjs +540 -0
- package/fesm2022/ngb-bootstrap-core-card.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-cdk.mjs +282 -0
- package/fesm2022/ngb-bootstrap-core-cdk.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-checkbox.mjs +165 -0
- package/fesm2022/ngb-bootstrap-core-checkbox.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-chips.mjs +512 -0
- package/fesm2022/ngb-bootstrap-core-chips.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-floating-label.mjs +83 -0
- package/fesm2022/ngb-bootstrap-core-floating-label.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-footer.mjs +48 -0
- package/fesm2022/ngb-bootstrap-core-footer.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-icon.mjs +243 -0
- package/fesm2022/ngb-bootstrap-core-icon.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-input.mjs +540 -0
- package/fesm2022/ngb-bootstrap-core-input.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-layout.mjs +272 -0
- package/fesm2022/ngb-bootstrap-core-layout.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-navbar.mjs +150 -0
- package/fesm2022/ngb-bootstrap-core-navbar.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-radio.mjs +279 -0
- package/fesm2022/ngb-bootstrap-core-radio.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-sidebar.mjs +425 -0
- package/fesm2022/ngb-bootstrap-core-sidebar.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-spinner.mjs +126 -0
- package/fesm2022/ngb-bootstrap-core-spinner.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core-switch.mjs +147 -0
- package/fesm2022/ngb-bootstrap-core-switch.mjs.map +1 -0
- package/fesm2022/ngb-bootstrap-core.mjs +69 -0
- package/fesm2022/ngb-bootstrap-core.mjs.map +1 -0
- package/ngb-bootstrap.css +827 -0
- package/package.json +118 -4
- package/styles/_breadcrumb.scss +9 -0
- package/styles/_button.scss +14 -0
- package/styles/_card.scss +86 -0
- package/styles/_chip.scss +10 -0
- package/styles/_choice.scss +14 -0
- package/styles/_contrast.scss +23 -0
- package/styles/_icon.scss +62 -0
- package/styles/_index.scss +33 -0
- package/styles/_input.scss +9 -0
- package/styles/_layout.scss +602 -0
- package/styles/_overlay.scss +14 -0
- package/styles/_tokens.scss +29 -0
- package/styles/_typography.scss +77 -0
- package/styles/ngb-bootstrap.scss +2 -0
- package/types/ngb-bootstrap-core-alert.d.ts +65 -0
- package/types/ngb-bootstrap-core-badge.d.ts +38 -0
- package/types/ngb-bootstrap-core-breadcrumb.d.ts +32 -0
- package/types/ngb-bootstrap-core-button.d.ts +177 -0
- package/types/ngb-bootstrap-core-card.d.ts +154 -0
- package/types/ngb-bootstrap-core-cdk.d.ts +165 -0
- package/types/ngb-bootstrap-core-checkbox.d.ts +53 -0
- package/types/ngb-bootstrap-core-chips.d.ts +170 -0
- package/types/ngb-bootstrap-core-floating-label.d.ts +22 -0
- package/types/ngb-bootstrap-core-footer.d.ts +16 -0
- package/types/ngb-bootstrap-core-icon.d.ts +99 -0
- package/types/ngb-bootstrap-core-input.d.ts +208 -0
- package/types/ngb-bootstrap-core-layout.d.ts +102 -0
- package/types/ngb-bootstrap-core-navbar.d.ts +33 -0
- package/types/ngb-bootstrap-core-radio.d.ts +96 -0
- package/types/ngb-bootstrap-core-sidebar.d.ts +62 -0
- package/types/ngb-bootstrap-core-spinner.d.ts +49 -0
- package/types/ngb-bootstrap-core-switch.d.ts +44 -0
- package/types/ngb-bootstrap-core.d.ts +82 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// Taiga UI's type scale and text colours (Taiga UI 5.30.0, measured 28 Oct 2026), applied by setting
|
|
2
|
+
// Bootstrap 6's own tokens so themes and dark mode keep working. Values Bootstrap has no token for get
|
|
3
|
+
// --ngb-* tokens. The shared --font-size-* scale is left alone, so components keep Bootstrap's sizes.
|
|
4
|
+
// Turn it off with: @use "@ngb-bootstrap/core/styles" with ($ngb-typography: false);
|
|
5
|
+
// Manrope is not bundled: load weights 500 and 800 (e.g. @fontsource/manrope) to match Taiga exactly.
|
|
6
|
+
|
|
7
|
+
$ngb-typography: true !default;
|
|
8
|
+
|
|
9
|
+
@if $ngb-typography {
|
|
10
|
+
// Unlayered on purpose: Bootstrap 6 declares its :root tokens outside any cascade layer, so an
|
|
11
|
+
// override inside @layer would always lose. Loaded after Bootstrap, these win.
|
|
12
|
+
:root {
|
|
13
|
+
--body-font-family: Manrope, system-ui, sans-serif;
|
|
14
|
+
--heading-font-weight: var(--font-weight-bold);
|
|
15
|
+
--fg-body: light-dark(#1b1f3b, #fff);
|
|
16
|
+
--fg-2: light-dark(rgb(27 31 59 / 65%), rgb(255 255 255 / 72%));
|
|
17
|
+
--fg-3: light-dark(rgb(27 31 59 / 40%), rgb(255 255 255 / 60%));
|
|
18
|
+
--link-color: light-dark(#4c66c3, #6788ff);
|
|
19
|
+
--link-hover-color: light-dark(#6c86e2, #526ed3);
|
|
20
|
+
--link-decoration: none;
|
|
21
|
+
--font-mono: monospace;
|
|
22
|
+
--code-font-size: 0.75rem;
|
|
23
|
+
|
|
24
|
+
--ngb-h1-font-size: 3.125rem;
|
|
25
|
+
--ngb-h1-line-height: 3.5rem;
|
|
26
|
+
--ngb-h2-font-size: 2.75rem;
|
|
27
|
+
--ngb-h2-line-height: 3rem;
|
|
28
|
+
--ngb-h3-font-size: 2.25rem;
|
|
29
|
+
--ngb-h3-line-height: 2.5rem;
|
|
30
|
+
--ngb-h4-font-size: 1.75rem;
|
|
31
|
+
--ngb-h4-line-height: 2rem;
|
|
32
|
+
--ngb-h5-font-size: 1.5rem;
|
|
33
|
+
--ngb-h5-line-height: 1.75rem;
|
|
34
|
+
--ngb-h6-font-size: 1.25rem;
|
|
35
|
+
--ngb-h6-line-height: 1.5rem;
|
|
36
|
+
--ngb-small-line-height: 1.25rem;
|
|
37
|
+
--ngb-code-font-weight: 500;
|
|
38
|
+
--ngb-code-line-height: 1.125rem;
|
|
39
|
+
--ngb-code-bg: light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 8%));
|
|
40
|
+
--ngb-pre-font-size: 0.875rem;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@layer components {
|
|
44
|
+
@each $level in 1, 2, 3, 4, 5, 6 {
|
|
45
|
+
h#{$level},
|
|
46
|
+
.h#{$level} {
|
|
47
|
+
font-size: var(--ngb-h#{$level}-font-size);
|
|
48
|
+
line-height: var(--ngb-h#{$level}-line-height);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
small,
|
|
53
|
+
.small {
|
|
54
|
+
line-height: var(--ngb-small-line-height);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
code {
|
|
58
|
+
padding: 0.0625rem 0.25rem;
|
|
59
|
+
font-weight: var(--ngb-code-font-weight);
|
|
60
|
+
line-height: var(--ngb-code-line-height);
|
|
61
|
+
background-color: var(--ngb-code-bg);
|
|
62
|
+
border-radius: var(--radius-3);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
pre {
|
|
66
|
+
font-size: var(--ngb-pre-font-size);
|
|
67
|
+
line-height: 1.5;
|
|
68
|
+
|
|
69
|
+
code {
|
|
70
|
+
padding: 0;
|
|
71
|
+
font-weight: inherit;
|
|
72
|
+
line-height: inherit;
|
|
73
|
+
background: none;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { NgbThemeColor } from "@ngb-bootstrap/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* How an alert is announced to screen readers: `assertive` is `role="alert"`, `polite` is
|
|
5
|
+
* `role="status"` and `off` sets no role, for content that is already on the page at load.
|
|
6
|
+
*/
|
|
7
|
+
export type NgbAlertLive = 'assertive' | 'polite' | 'off';
|
|
8
|
+
/**
|
|
9
|
+
* Inline message built on Bootstrap 6 `.alert`, optionally dismissible. Use `.alert-heading` on a
|
|
10
|
+
* heading and `.alert-link` on links inside it, as in Bootstrap. Dismissing only emits `closed`:
|
|
11
|
+
* remove the alert in the app, and move focus somewhere sensible if it was on the close button.
|
|
12
|
+
*
|
|
13
|
+
* ```html
|
|
14
|
+
* @if (saved()) {
|
|
15
|
+
* <ngb-alert color="success" dismissible (closed)="saved.set(false)">
|
|
16
|
+
* <h4 class="alert-heading">Saved</h4>
|
|
17
|
+
* Your changes are live.
|
|
18
|
+
* </ngb-alert>
|
|
19
|
+
* }
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export declare class NgbAlert {
|
|
23
|
+
/** Theme colour (Bootstrap `.theme-*`). Without it the alert uses Bootstrap's neutral look. */
|
|
24
|
+
readonly color: import("@angular/core").InputSignal<NgbThemeColor | undefined>;
|
|
25
|
+
/** Shows a close button that hides the alert. */
|
|
26
|
+
readonly dismissible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
27
|
+
/** Accessible name of the close button. Defaults to the `close` string of `NGB_I18N`. */
|
|
28
|
+
readonly dismissLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
29
|
+
/**
|
|
30
|
+
* `polite` (default, `role="status"`) waits for the user to be idle. Use `assertive`
|
|
31
|
+
* (`role="alert"`) only for errors that need attention now. `off` sets no role, which suits an
|
|
32
|
+
* alert that is already on the page when it loads: a live region only announces changes.
|
|
33
|
+
*/
|
|
34
|
+
readonly live: import("@angular/core").InputSignal<NgbAlertLive>;
|
|
35
|
+
/** Emits when the user clicks the close button. The app removes the alert. */
|
|
36
|
+
readonly closed: import("@angular/core").OutputEmitterRef<void>;
|
|
37
|
+
protected readonly role: import("@angular/core").Signal<"alert" | "status" | null>;
|
|
38
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
39
|
+
protected dismiss(): void;
|
|
40
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbAlert, never>;
|
|
41
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbAlert, "ngb-alert", never, {
|
|
42
|
+
"color": {
|
|
43
|
+
"alias": "color";
|
|
44
|
+
"required": false;
|
|
45
|
+
"isSignal": true;
|
|
46
|
+
};
|
|
47
|
+
"dismissible": {
|
|
48
|
+
"alias": "dismissible";
|
|
49
|
+
"required": false;
|
|
50
|
+
"isSignal": true;
|
|
51
|
+
};
|
|
52
|
+
"dismissLabel": {
|
|
53
|
+
"alias": "dismissLabel";
|
|
54
|
+
"required": false;
|
|
55
|
+
"isSignal": true;
|
|
56
|
+
};
|
|
57
|
+
"live": {
|
|
58
|
+
"alias": "live";
|
|
59
|
+
"required": false;
|
|
60
|
+
"isSignal": true;
|
|
61
|
+
};
|
|
62
|
+
}, {
|
|
63
|
+
"closed": "closed";
|
|
64
|
+
}, never, ["*"], true, never>;
|
|
65
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { NgbThemeColor } from "@ngb-bootstrap/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export type NgbBadgeVariant = 'solid' | 'subtle' | 'outline';
|
|
4
|
+
export type NgbBadgeSize = 'md' | 'lg';
|
|
5
|
+
/**
|
|
6
|
+
* Small count or label, built on Bootstrap 6 `.badge`.
|
|
7
|
+
*
|
|
8
|
+
* ```html
|
|
9
|
+
* <ngb-badge color="success" variant="subtle">Active</ngb-badge>
|
|
10
|
+
* ```
|
|
11
|
+
*/
|
|
12
|
+
export declare class NgbBadge {
|
|
13
|
+
/** Theme colour (Bootstrap `.theme-*`). */
|
|
14
|
+
readonly color: import("@angular/core").InputSignal<NgbThemeColor>;
|
|
15
|
+
/** `solid` (default), `subtle` or `outline`. */
|
|
16
|
+
readonly variant: import("@angular/core").InputSignal<NgbBadgeVariant>;
|
|
17
|
+
/** `md` (default) or `lg`. */
|
|
18
|
+
readonly size: import("@angular/core").InputSignal<NgbBadgeSize>;
|
|
19
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
20
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbBadge, never>;
|
|
21
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbBadge, "ngb-badge", never, {
|
|
22
|
+
"color": {
|
|
23
|
+
"alias": "color";
|
|
24
|
+
"required": false;
|
|
25
|
+
"isSignal": true;
|
|
26
|
+
};
|
|
27
|
+
"variant": {
|
|
28
|
+
"alias": "variant";
|
|
29
|
+
"required": false;
|
|
30
|
+
"isSignal": true;
|
|
31
|
+
};
|
|
32
|
+
"size": {
|
|
33
|
+
"alias": "size";
|
|
34
|
+
"required": false;
|
|
35
|
+
"isSignal": true;
|
|
36
|
+
};
|
|
37
|
+
}, {}, never, ["*"], true, never>;
|
|
38
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
/** One step in `<ngb-breadcrumb>`. The last item is the current page. */
|
|
3
|
+
export interface NgbBreadcrumbItem {
|
|
4
|
+
readonly label: string;
|
|
5
|
+
/** Router link. Omit for steps that are not pages of their own. */
|
|
6
|
+
readonly link?: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Trail of links to the current page, built on Bootstrap 6 `.breadcrumb`.
|
|
10
|
+
*
|
|
11
|
+
* ```html
|
|
12
|
+
* <ngb-breadcrumb [items]="[{ label: 'Components', link: '/components' }, { label: 'Badge' }]" />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare class NgbBreadcrumb {
|
|
16
|
+
readonly items: import("@angular/core").InputSignal<readonly NgbBreadcrumbItem[]>;
|
|
17
|
+
/** Accessible name of the navigation. */
|
|
18
|
+
readonly label: import("@angular/core").InputSignal<string>;
|
|
19
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbBreadcrumb, never>;
|
|
20
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbBreadcrumb, "ngb-breadcrumb", never, {
|
|
21
|
+
"items": {
|
|
22
|
+
"alias": "items";
|
|
23
|
+
"required": false;
|
|
24
|
+
"isSignal": true;
|
|
25
|
+
};
|
|
26
|
+
"label": {
|
|
27
|
+
"alias": "label";
|
|
28
|
+
"required": false;
|
|
29
|
+
"isSignal": true;
|
|
30
|
+
};
|
|
31
|
+
}, {}, never, never, true, never>;
|
|
32
|
+
}
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import { NgbThemeColor } from "@ngb-bootstrap/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { NgbIconDefinition, NgbIconName } from "@ngb-bootstrap/icons";
|
|
4
|
+
export type NgbButtonVariant = 'solid' | 'outline' | 'subtle' | 'text' | 'link';
|
|
5
|
+
export type NgbButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
6
|
+
export type NgbButtonType = 'button' | 'submit' | 'reset';
|
|
7
|
+
/**
|
|
8
|
+
* Button or link styled with Bootstrap 6 `.btn`. It enhances the native `<button>` or `<a>`, so
|
|
9
|
+
* forms, `routerLink` and keyboard behaviour keep working.
|
|
10
|
+
*
|
|
11
|
+
* ```html
|
|
12
|
+
* <button ngbButton color="primary" variant="outline" size="sm" [loading]="saving()">Save</button>
|
|
13
|
+
* <a ngbButton href="/docs" [disabled]="locked()">Docs</a>
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export declare class NgbButton {
|
|
17
|
+
private readonly element;
|
|
18
|
+
protected readonly isButton: boolean;
|
|
19
|
+
/** Theme colour (Bootstrap `.theme-*`). */
|
|
20
|
+
readonly color: import("@angular/core").InputSignal<NgbThemeColor>;
|
|
21
|
+
/** `solid` (default), `outline`, `subtle`, `text` or `link`. */
|
|
22
|
+
readonly variant: import("@angular/core").InputSignal<NgbButtonVariant>;
|
|
23
|
+
/** `xs`, `sm`, `md` (default) or `lg`. */
|
|
24
|
+
readonly size: import("@angular/core").InputSignal<NgbButtonSize>;
|
|
25
|
+
/** Shows a spinner, sets `aria-busy` and ignores clicks. The button stays focusable. */
|
|
26
|
+
readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
27
|
+
/** Disables the button. A link gets `aria-disabled`, `tabindex="-1"` and ignores clicks. */
|
|
28
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
29
|
+
/** Stretches the button to the full width of its container. */
|
|
30
|
+
readonly block: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
31
|
+
/** The `type` of a `<button>`. Defaults to `button`, so it does not submit a form by accident. */
|
|
32
|
+
readonly type: import("@angular/core").InputSignal<NgbButtonType>;
|
|
33
|
+
protected readonly inert: import("@angular/core").Signal<boolean>;
|
|
34
|
+
/** Extra classes added by subclasses, with a leading space. */
|
|
35
|
+
protected readonly extraClasses: () => string;
|
|
36
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
37
|
+
constructor();
|
|
38
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbButton, never>;
|
|
39
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbButton, "button[ngbButton], a[ngbButton]", never, {
|
|
40
|
+
"color": {
|
|
41
|
+
"alias": "color";
|
|
42
|
+
"required": false;
|
|
43
|
+
"isSignal": true;
|
|
44
|
+
};
|
|
45
|
+
"variant": {
|
|
46
|
+
"alias": "variant";
|
|
47
|
+
"required": false;
|
|
48
|
+
"isSignal": true;
|
|
49
|
+
};
|
|
50
|
+
"size": {
|
|
51
|
+
"alias": "size";
|
|
52
|
+
"required": false;
|
|
53
|
+
"isSignal": true;
|
|
54
|
+
};
|
|
55
|
+
"loading": {
|
|
56
|
+
"alias": "loading";
|
|
57
|
+
"required": false;
|
|
58
|
+
"isSignal": true;
|
|
59
|
+
};
|
|
60
|
+
"disabled": {
|
|
61
|
+
"alias": "disabled";
|
|
62
|
+
"required": false;
|
|
63
|
+
"isSignal": true;
|
|
64
|
+
};
|
|
65
|
+
"block": {
|
|
66
|
+
"alias": "block";
|
|
67
|
+
"required": false;
|
|
68
|
+
"isSignal": true;
|
|
69
|
+
};
|
|
70
|
+
"type": {
|
|
71
|
+
"alias": "type";
|
|
72
|
+
"required": false;
|
|
73
|
+
"isSignal": true;
|
|
74
|
+
};
|
|
75
|
+
}, {}, never, ["*"], true, never>;
|
|
76
|
+
}
|
|
77
|
+
export type NgbButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
78
|
+
/**
|
|
79
|
+
* Joins buttons into one segmented control, built on Bootstrap 6 `.btn-group`.
|
|
80
|
+
*
|
|
81
|
+
* ```html
|
|
82
|
+
* <ngb-button-group label="Text alignment" size="sm">
|
|
83
|
+
* <button ngbButton variant="outline">Left</button>
|
|
84
|
+
* <button ngbButton variant="outline">Right</button>
|
|
85
|
+
* </ngb-button-group>
|
|
86
|
+
* ```
|
|
87
|
+
*/
|
|
88
|
+
export declare class NgbButtonGroup {
|
|
89
|
+
/** Accessible name of the group. */
|
|
90
|
+
readonly label: import("@angular/core").InputSignal<string | undefined>;
|
|
91
|
+
/** `horizontal` (default) or `vertical`. */
|
|
92
|
+
readonly orientation: import("@angular/core").InputSignal<NgbButtonGroupOrientation>;
|
|
93
|
+
/** Size applied to every button in the group: `xs`, `sm`, `md` (default) or `lg`. */
|
|
94
|
+
readonly size: import("@angular/core").InputSignal<NgbButtonSize>;
|
|
95
|
+
/** Draws a thin divider between buttons, for variants without a border. */
|
|
96
|
+
readonly divider: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
97
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
98
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbButtonGroup, never>;
|
|
99
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbButtonGroup, "ngb-button-group", never, {
|
|
100
|
+
"label": {
|
|
101
|
+
"alias": "label";
|
|
102
|
+
"required": false;
|
|
103
|
+
"isSignal": true;
|
|
104
|
+
};
|
|
105
|
+
"orientation": {
|
|
106
|
+
"alias": "orientation";
|
|
107
|
+
"required": false;
|
|
108
|
+
"isSignal": true;
|
|
109
|
+
};
|
|
110
|
+
"size": {
|
|
111
|
+
"alias": "size";
|
|
112
|
+
"required": false;
|
|
113
|
+
"isSignal": true;
|
|
114
|
+
};
|
|
115
|
+
"divider": {
|
|
116
|
+
"alias": "divider";
|
|
117
|
+
"required": false;
|
|
118
|
+
"isSignal": true;
|
|
119
|
+
};
|
|
120
|
+
}, {}, never, ["*"], true, never>;
|
|
121
|
+
}
|
|
122
|
+
/**
|
|
123
|
+
* Close button built on Bootstrap 6 `.btn-close`, for dialogs, alerts and drawers.
|
|
124
|
+
*
|
|
125
|
+
* ```html
|
|
126
|
+
* <button ngbButtonX (click)="dismiss()"></button>
|
|
127
|
+
* ```
|
|
128
|
+
*/
|
|
129
|
+
export declare class NgbButtonX {
|
|
130
|
+
private readonly i18n;
|
|
131
|
+
/** Accessible name. Defaults to the `close` string of `NGB_I18N` ("Close" in English). */
|
|
132
|
+
readonly label: import("@angular/core").InputSignal<string | undefined>;
|
|
133
|
+
protected readonly ariaLabel: import("@angular/core").Signal<string>;
|
|
134
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbButtonX, never>;
|
|
135
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbButtonX, "button[ngbButtonX]", never, {
|
|
136
|
+
"label": {
|
|
137
|
+
"alias": "label";
|
|
138
|
+
"required": false;
|
|
139
|
+
"isSignal": true;
|
|
140
|
+
};
|
|
141
|
+
}, {}, never, never, true, never>;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Square button that shows only an icon, built on `.btn` with `.btn-icon`. `label` is required: it
|
|
145
|
+
* becomes the `aria-label`, since there is no visible text.
|
|
146
|
+
*
|
|
147
|
+
* ```html
|
|
148
|
+
* <button ngbIconButton [icon]="ngbIconSearch" label="Search" variant="subtle"></button>
|
|
149
|
+
* ```
|
|
150
|
+
*/
|
|
151
|
+
export declare class NgbIconButton extends NgbButton {
|
|
152
|
+
/** Accessible name of the button. */
|
|
153
|
+
readonly label: import("@angular/core").InputSignal<string>;
|
|
154
|
+
/** Icon definition from `@ngb-bootstrap/icons`. Takes precedence over `name`. */
|
|
155
|
+
readonly icon: import("@angular/core").InputSignal<NgbIconDefinition | undefined>;
|
|
156
|
+
/** Name of an icon registered with `provideNgbIcons`. */
|
|
157
|
+
readonly name: import("@angular/core").InputSignal<NgbIconName | (string & {}) | undefined>;
|
|
158
|
+
protected readonly extraClasses: () => string;
|
|
159
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbIconButton, never>;
|
|
160
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbIconButton, "button[ngbIconButton], a[ngbIconButton]", never, {
|
|
161
|
+
"label": {
|
|
162
|
+
"alias": "label";
|
|
163
|
+
"required": true;
|
|
164
|
+
"isSignal": true;
|
|
165
|
+
};
|
|
166
|
+
"icon": {
|
|
167
|
+
"alias": "icon";
|
|
168
|
+
"required": false;
|
|
169
|
+
"isSignal": true;
|
|
170
|
+
};
|
|
171
|
+
"name": {
|
|
172
|
+
"alias": "name";
|
|
173
|
+
"required": false;
|
|
174
|
+
"isSignal": true;
|
|
175
|
+
};
|
|
176
|
+
}, {}, never, never, true, never>;
|
|
177
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { NgbThemeColor } from "@ngb-bootstrap/core";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export type NgbCardVariant = 'default' | 'subtle';
|
|
4
|
+
/**
|
|
5
|
+
* Container built on Bootstrap 6 `.card`. Fill it with the `ngbCard*` directives
|
|
6
|
+
* (`ngbCardHeader`, `ngbCardBody`, `ngbCardFooter`, `ngbCardSubtitle`, `ngbCardImg`).
|
|
7
|
+
*
|
|
8
|
+
* ```html
|
|
9
|
+
* <ngb-card color="info" variant="subtle">
|
|
10
|
+
* <div ngbCardHeader>Featured</div>
|
|
11
|
+
* <div ngbCardBody>
|
|
12
|
+
* <h5>Title</h5>
|
|
13
|
+
* <p>Some text.</p>
|
|
14
|
+
* </div>
|
|
15
|
+
* </ngb-card>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare class NgbCard {
|
|
19
|
+
/** Theme colour (Bootstrap `.theme-*`): border and header take it. Default is neutral. */
|
|
20
|
+
readonly color: import("@angular/core").InputSignal<NgbThemeColor | undefined>;
|
|
21
|
+
/** `default` or `subtle` (`.card-subtle`, tinted header and footer). */
|
|
22
|
+
readonly variant: import("@angular/core").InputSignal<NgbCardVariant>;
|
|
23
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
24
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCard, never>;
|
|
25
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbCard, "ngb-card", never, {
|
|
26
|
+
"color": {
|
|
27
|
+
"alias": "color";
|
|
28
|
+
"required": false;
|
|
29
|
+
"isSignal": true;
|
|
30
|
+
};
|
|
31
|
+
"variant": {
|
|
32
|
+
"alias": "variant";
|
|
33
|
+
"required": false;
|
|
34
|
+
"isSignal": true;
|
|
35
|
+
};
|
|
36
|
+
}, {}, never, ["*"], true, never>;
|
|
37
|
+
}
|
|
38
|
+
/** `.card-header` on any element. */
|
|
39
|
+
export declare class NgbCardHeader {
|
|
40
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCardHeader, never>;
|
|
41
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCardHeader, "[ngbCardHeader]", never, {}, {}, never, never, true, never>;
|
|
42
|
+
}
|
|
43
|
+
/** `.card-body` on any element. */
|
|
44
|
+
export declare class NgbCardBody {
|
|
45
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCardBody, never>;
|
|
46
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCardBody, "[ngbCardBody]", never, {}, {}, never, never, true, never>;
|
|
47
|
+
}
|
|
48
|
+
/** `.card-subtitle` on any element, usually a heading inside the body. */
|
|
49
|
+
export declare class NgbCardSubtitle {
|
|
50
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCardSubtitle, never>;
|
|
51
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCardSubtitle, "[ngbCardSubtitle]", never, {}, {}, never, never, true, never>;
|
|
52
|
+
}
|
|
53
|
+
/** `.card-footer` on any element. */
|
|
54
|
+
export declare class NgbCardFooter {
|
|
55
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCardFooter, never>;
|
|
56
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCardFooter, "[ngbCardFooter]", never, {}, {}, never, never, true, never>;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Card image, `.card-img-top` by default. Give it `alt` text, or `alt=""` when it is decorative.
|
|
60
|
+
*
|
|
61
|
+
* ```html
|
|
62
|
+
* <img ngbCardImg src="a.jpg" alt="" /> <img ngbCardImg="bottom" src="b.jpg" alt="" />
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
export declare class NgbCardImg {
|
|
66
|
+
/** `top` (default) or `bottom`. */
|
|
67
|
+
readonly ngbCardImg: import("@angular/core").InputSignal<"" | "top" | "bottom">;
|
|
68
|
+
protected readonly classes: import("@angular/core").Signal<"card-img-bottom" | "card-img-top">;
|
|
69
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCardImg, never>;
|
|
70
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCardImg, "img[ngbCardImg]", never, {
|
|
71
|
+
"ngbCardImg": {
|
|
72
|
+
"alias": "ngbCardImg";
|
|
73
|
+
"required": false;
|
|
74
|
+
"isSignal": true;
|
|
75
|
+
};
|
|
76
|
+
}, {}, never, never, true, never>;
|
|
77
|
+
}
|
|
78
|
+
/**
|
|
79
|
+
* Names the card. Put it on the title element inside the summary. The hidden region is labelled by
|
|
80
|
+
* it, so a screen reader announces "Order 42, region" rather than the button's own label.
|
|
81
|
+
*/
|
|
82
|
+
export declare class NgbCollapsibleTitle {
|
|
83
|
+
readonly id: string;
|
|
84
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCollapsibleTitle, never>;
|
|
85
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCollapsibleTitle, "[ngbCollapsibleTitle]", never, {}, {}, never, never, true, never>;
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Marks the content that is hidden while the card is collapsed. It renders inside the card, below
|
|
89
|
+
* the summary.
|
|
90
|
+
*/
|
|
91
|
+
export declare class NgbCollapsibleContent {
|
|
92
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCollapsibleContent, never>;
|
|
93
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<NgbCollapsibleContent, "[ngbCollapsibleContent]", never, {}, {}, never, never, true, never>;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Large card with a summary that is always visible and extra content that folds away under it,
|
|
97
|
+
* like Taiga UI's collapsible large card. A small icon button at the bottom-end of the summary
|
|
98
|
+
* toggles it. While collapsed, a narrower strip peeks out under the card to hint at what is hidden.
|
|
99
|
+
*
|
|
100
|
+
* The default projected content is the summary. Mark the hidden part with `ngbCollapsibleContent`
|
|
101
|
+
* and the title with `ngbCollapsibleTitle` (it names the region). The hidden content stays in the
|
|
102
|
+
* DOM while collapsed, but is `inert` and invisible.
|
|
103
|
+
*
|
|
104
|
+
* ```html
|
|
105
|
+
* <ngb-collapsible-card [(expanded)]="open">
|
|
106
|
+
* <h3 ngbCollapsibleTitle class="h5">Order 42</h3>
|
|
107
|
+
* <p>Shipped on Monday.</p>
|
|
108
|
+
* <div ngbCollapsibleContent>…</div>
|
|
109
|
+
* </ngb-collapsible-card>
|
|
110
|
+
* ```
|
|
111
|
+
*/
|
|
112
|
+
export declare class NgbCollapsibleCard {
|
|
113
|
+
private readonly animation;
|
|
114
|
+
private readonly i18n;
|
|
115
|
+
protected readonly toggleId: string;
|
|
116
|
+
protected readonly regionId: string;
|
|
117
|
+
protected readonly chevron: import("@ngb-bootstrap/icons").NgbIconDefinition;
|
|
118
|
+
protected readonly title: import("@angular/core").Signal<NgbCollapsibleTitle | undefined>;
|
|
119
|
+
/** Whether the hidden content is open. Two-way: `[(expanded)]`. Defaults to collapsed. */
|
|
120
|
+
readonly expanded: import("@angular/core").ModelSignal<boolean>;
|
|
121
|
+
/** Stops the toggle from working. */
|
|
122
|
+
readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
123
|
+
/** Accessible name of the toggle while collapsed. Defaults to the `expand` i18n string. */
|
|
124
|
+
readonly expandLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
125
|
+
/** Accessible name of the toggle while expanded. Defaults to the `collapse` i18n string. */
|
|
126
|
+
readonly collapseLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
127
|
+
protected readonly label: import("@angular/core").Signal<string>;
|
|
128
|
+
protected readonly classes: import("@angular/core").Signal<string>;
|
|
129
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<NgbCollapsibleCard, never>;
|
|
130
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<NgbCollapsibleCard, "ngb-collapsible-card", never, {
|
|
131
|
+
"expanded": {
|
|
132
|
+
"alias": "expanded";
|
|
133
|
+
"required": false;
|
|
134
|
+
"isSignal": true;
|
|
135
|
+
};
|
|
136
|
+
"disabled": {
|
|
137
|
+
"alias": "disabled";
|
|
138
|
+
"required": false;
|
|
139
|
+
"isSignal": true;
|
|
140
|
+
};
|
|
141
|
+
"expandLabel": {
|
|
142
|
+
"alias": "expandLabel";
|
|
143
|
+
"required": false;
|
|
144
|
+
"isSignal": true;
|
|
145
|
+
};
|
|
146
|
+
"collapseLabel": {
|
|
147
|
+
"alias": "collapseLabel";
|
|
148
|
+
"required": false;
|
|
149
|
+
"isSignal": true;
|
|
150
|
+
};
|
|
151
|
+
}, {
|
|
152
|
+
"expanded": "expandedChange";
|
|
153
|
+
}, ["title"], ["*", "[ngbCollapsibleContent]"], true, never>;
|
|
154
|
+
}
|