@daffodil/design 0.81.1 → 0.83.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/accordion/README.md +44 -29
- package/accordion/accordion/accordion/accordion.component.d.ts +3 -0
- package/accordion/accordion/accordion-item/accordion-item.component.d.ts +23 -12
- package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts +3 -0
- package/accordion/accordion.d.ts +5 -0
- package/accordion/examples/disabled-accordion/disabled-accordion.component.d.ts +5 -0
- package/accordion/examples/initially-expanded-accordion/initially-expanded-accordion.component.d.ts +5 -0
- package/accordion/examples/public_api.d.ts +2 -0
- package/accordion/src/accordion-theme.scss +28 -6
- package/article/README.md +4 -3
- package/article/article.d.ts +3 -0
- package/article/src/article-theme.scss +128 -51
- package/breadcrumb/README.md +38 -28
- package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +15 -2
- package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +18 -4
- package/breadcrumb/breadcrumb.d.ts +3 -0
- package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts +6 -0
- package/breadcrumb/public_api.d.ts +2 -2
- package/button/README.md +43 -23
- package/button/button/basic/button.component.d.ts +5 -1
- package/button/button/button-base.directive.d.ts +11 -3
- package/button/button/button-sizable.directive.d.ts +1 -1
- package/button/button/raised/raised.component.d.ts +2 -0
- package/button/button/stroked/stroked.component.d.ts +5 -1
- package/button/button.d.ts +4 -2
- package/button/button.module.d.ts +1 -2
- package/button/examples/elevated-button/elevated-button.component.d.ts +6 -0
- package/button/examples/examples.d.ts +2 -1
- package/button/examples/public_api.d.ts +1 -0
- package/button/public_api.d.ts +0 -1
- package/button/src/button/basic/button-theme.scss +185 -80
- package/button/src/button/button-base.scss +41 -16
- package/button/src/button/flat/flat-theme.scss +144 -85
- package/button/src/button/icon/icon-theme.scss +183 -79
- package/button/src/button/raised/raised-theme.scss +2 -7
- package/button/src/button/stroked/stroked-theme.scss +128 -94
- package/button/src/button/underline/underline-theme.scss +112 -44
- package/callout/README.md +4 -3
- package/callout/callout.d.ts +3 -0
- package/card/README.md +6 -3
- package/card/card/basic/basic.component.d.ts +7 -0
- package/card/card/raised/raised.component.d.ts +7 -0
- package/card/card/stroked/stroked.component.d.ts +7 -0
- package/card/card-base.directive.d.ts +25 -0
- package/card/card.d.ts +18 -1
- package/card/card.module.d.ts +10 -8
- package/card/examples/card-theming/card-theming.component.d.ts +2 -1
- package/card/examples/public_api.d.ts +1 -1
- package/card/public_api.d.ts +6 -1
- package/card/src/card/raised/raised-theme.scss +30 -0
- package/card/src/card/stroked/stroked-theme.scss +135 -0
- package/card/src/card-base-theme.scss +197 -0
- package/card/src/card-base.scss +134 -0
- package/container/README.md +5 -3
- package/container/container.d.ts +3 -0
- package/core/colorable/colorable.d.ts +20 -14
- package/core/colorable/colorable.directive.d.ts +9 -6
- package/fesm2022/daffodil-design-accordion-examples.mjs +28 -4
- package/fesm2022/daffodil-design-accordion-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-accordion.mjs +56 -29
- package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
- package/fesm2022/daffodil-design-article-examples.mjs +30 -30
- package/fesm2022/daffodil-design-article.mjs +14 -11
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs +24 -4
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-breadcrumb.mjs +78 -40
- package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
- package/fesm2022/daffodil-design-button-examples.mjs +55 -33
- package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +79 -69
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout-examples.mjs +12 -12
- package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-callout.mjs +25 -22
- package/fesm2022/daffodil-design-callout.mjs.map +1 -1
- package/fesm2022/daffodil-design-card-examples.mjs +35 -31
- package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-card.mjs +140 -86
- package/fesm2022/daffodil-design-card.mjs.map +1 -1
- package/fesm2022/daffodil-design-checkbox-examples.mjs +6 -6
- package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-container-examples.mjs +3 -3
- package/fesm2022/daffodil-design-container.mjs +10 -7
- package/fesm2022/daffodil-design-container.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero-examples.mjs +12 -12
- package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-hero.mjs +25 -22
- package/fesm2022/daffodil-design-hero.mjs.map +1 -1
- package/fesm2022/daffodil-design-image-examples.mjs +9 -9
- package/fesm2022/daffodil-design-image.mjs +36 -19
- package/fesm2022/daffodil-design-image.mjs.map +1 -1
- package/fesm2022/daffodil-design-input-examples.mjs +12 -12
- package/fesm2022/daffodil-design-link-set.mjs +19 -16
- package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
- package/fesm2022/daffodil-design-list-examples.mjs +12 -12
- package/fesm2022/daffodil-design-list.mjs +13 -10
- package/fesm2022/daffodil-design-list.mjs.map +1 -1
- package/fesm2022/daffodil-design-loading-icon-examples.mjs +4 -4
- package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-loading-icon.mjs +11 -8
- package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery-examples.mjs +62 -13
- package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery.mjs +204 -250
- package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
- package/fesm2022/daffodil-design-menu-examples.mjs +6 -6
- package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-menu.mjs +16 -16
- package/fesm2022/daffodil-design-modal-examples.mjs +7 -7
- package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +28 -25
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar-examples.mjs +12 -12
- package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-navbar.mjs +10 -7
- package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +17 -16
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +23 -20
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-paginator-examples.mjs +6 -6
- package/fesm2022/daffodil-design-paginator.mjs +13 -7
- package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar-examples.mjs +10 -10
- package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs +13 -13
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
- package/fesm2022/daffodil-design-quantity-field-examples.mjs +12 -12
- package/fesm2022/daffodil-design-radio-examples.mjs +3 -3
- package/fesm2022/daffodil-design-sidebar-examples.mjs +14 -14
- package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +150 -61
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch-examples.mjs +15 -15
- package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch.mjs +38 -10
- package/fesm2022/daffodil-design-switch.mjs.map +1 -1
- package/fesm2022/daffodil-design-tabs-examples.mjs +23 -17
- package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-tabs.mjs +67 -35
- package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
- package/fesm2022/daffodil-design-text-snippet-examples.mjs +3 -3
- package/fesm2022/daffodil-design-text-snippet.mjs +4 -5
- package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast-examples.mjs +40 -15
- package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast.mjs +296 -239
- package/fesm2022/daffodil-design-toast.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree-examples.mjs +6 -6
- package/fesm2022/daffodil-design-tree.mjs +15 -12
- package/fesm2022/daffodil-design-tree.mjs.map +1 -1
- package/fesm2022/daffodil-design-youtube-player.mjs +104 -0
- package/fesm2022/daffodil-design-youtube-player.mjs.map +1 -0
- package/fesm2022/daffodil-design.mjs +167 -155
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/hero/README.md +4 -3
- package/hero/hero.d.ts +3 -0
- package/image/README.md +4 -3
- package/image/image/image.component.d.ts +22 -1
- package/image/image.d.ts +3 -0
- package/link-set/README.md +4 -3
- package/link-set/link-set.d.ts +3 -0
- package/list/README.md +4 -3
- package/list/list.d.ts +3 -0
- package/loading-icon/README.md +10 -7
- package/loading-icon/loading-icon.d.ts +3 -0
- package/loading-icon/src/loading-icon-theme.scss +66 -38
- package/media-gallery/README.md +19 -10
- package/media-gallery/examples/iterated-media-gallery/iterated-media-gallery.component.d.ts +13 -0
- package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts +5 -0
- package/media-gallery/examples/public_api.d.ts +2 -0
- package/media-gallery/helpers/media-gallery-registration.interface.d.ts +1 -1
- package/media-gallery/media-gallery/media-gallery.component.d.ts +89 -11
- package/media-gallery/media-gallery.d.ts +4 -2
- package/media-gallery/media-gallery.module.d.ts +1 -2
- package/media-gallery/public_api.d.ts +3 -4
- package/media-gallery/src/media-gallery-theme.scss +30 -4
- package/media-gallery/thumbnail/thumbnail.directive.d.ts +45 -22
- package/menu/README.md +1 -2
- package/modal/README.md +3 -2
- package/modal/modal.d.ts +3 -0
- package/navbar/README.md +3 -2
- package/navbar/navbar.d.ts +3 -0
- package/notification/README.md +5 -4
- package/notification/notification.d.ts +3 -0
- package/notification/src/notification-theme.scss +62 -23
- package/package.json +1 -1
- package/paginator/README.md +3 -2
- package/paginator/paginator/paginator.component.d.ts +3 -0
- package/paginator/paginator.d.ts +3 -0
- package/progress-bar/README.md +5 -6
- package/progress-bar/progress-bar.component.d.ts +0 -3
- package/progress-bar/progress-bar.d.ts +3 -0
- package/progress-bar/src/progress-bar-theme.scss +17 -8
- package/scss/theme.scss +36 -17
- package/scss/theming/_configure-theme.scss +2 -0
- package/scss/theming/_index.scss +1 -0
- package/scss/theming/_light-dark.scss +45 -0
- package/sidebar/README.md +20 -21
- package/sidebar/helper/sidebar-mode.d.ts +9 -15
- package/sidebar/public_api.d.ts +10 -11
- package/sidebar/sidebar/sidebar.component.d.ts +22 -7
- package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +11 -0
- package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts +8 -0
- package/sidebar/sidebar-header/sidebar-header.component.d.ts +19 -1
- package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +36 -15
- package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts +17 -0
- package/sidebar/sidebar.d.ts +4 -2
- package/sidebar/sidebar.module.d.ts +1 -2
- package/switch/README.md +3 -2
- package/switch/src/switch-theme.scss +29 -10
- package/switch/switch/switch.component.d.ts +31 -6
- package/switch/switch.d.ts +3 -0
- package/tabs/README.md +33 -3
- package/tabs/src/tabs-theme.scss +31 -13
- package/tabs/tabs/tab/tab.component.d.ts +1 -1
- package/tabs/tabs/tab-label/tab-label.component.d.ts +6 -0
- package/tabs/tabs/tab-panel/tab-panel.component.d.ts +8 -0
- package/tabs/tabs/tabs.component.d.ts +21 -4
- package/tabs/tabs.d.ts +8 -2
- package/text-snippet/README.md +19 -1
- package/toast/README.md +21 -151
- package/toast/examples/dismissible-toast/dismissible-toast.component.d.ts +11 -0
- package/toast/examples/public_api.d.ts +2 -1
- package/toast/interfaces/toast-action.d.ts +22 -11
- package/toast/interfaces/toast-action.type.d.ts +10 -0
- package/toast/interfaces/toast.d.ts +11 -5
- package/toast/options/daff-toast-options.d.ts +2 -1
- package/toast/public_api.d.ts +2 -6
- package/toast/service/position.service.d.ts +9 -1
- package/toast/service/toast.service.d.ts +63 -0
- package/toast/src/toast-theme.scss +80 -33
- package/toast/toast/toast-config.d.ts +24 -1
- package/toast/toast/toast-provider.d.ts +16 -0
- package/toast/toast/toast.component.d.ts +20 -1
- package/toast/toast-actions/toast-actions.directive.d.ts +3 -0
- package/toast/toast-message/toast-message.directive.d.ts +3 -0
- package/toast/toast-title/toast-title.directive.d.ts +3 -0
- package/tree/README.md +6 -10
- package/tree/src/tree-theme.scss +39 -13
- package/tree/tree.d.ts +3 -0
- package/youtube-player/index.d.ts +1 -0
- package/youtube-player/public_api.d.ts +3 -0
- package/youtube-player/safe-url.pipe.d.ts +10 -0
- package/youtube-player/youtube-player.component.d.ts +23 -0
- package/youtube-player/youtube-player.d.ts +6 -0
- package/card/card/card.component.d.ts +0 -48
- package/card/src/card-theme-variants/basic-card.scss +0 -6
- package/card/src/card-theme-variants/linkable-card.scss +0 -16
- package/card/src/card-theme-variants/stroked-card.scss +0 -3
- package/card/src/card-theme.scss +0 -170
- package/media-gallery/media-renderer/media-renderer.component.d.ts +0 -29
- package/media-gallery/registry/media-gallery.registry.d.ts +0 -34
- package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +0 -1
- package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts +0 -9
- package/scss/theming/prebuilt/internal-theme.scss +0 -13
- package/toast/toast.module.d.ts +0 -19
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class IteratedBreadcrumbComponent {
|
3
|
+
breadcrumbs: any[];
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<IteratedBreadcrumbComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<IteratedBreadcrumbComponent, "iterated-breadcrumb", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export
|
2
|
-
export
|
1
|
+
export { DaffBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
|
2
|
+
export { DaffBreadcrumbItemDirective } from './breadcrumb-item/breadcrumb-item.directive';
|
3
3
|
export { DAFF_BREADCRUMB_COMPONENTS } from './breadcrumb';
|
4
4
|
export { DaffBreadcrumbModule } from './breadcrumb.module';
|
package/button/README.md
CHANGED
@@ -1,46 +1,53 @@
|
|
1
1
|
# Button
|
2
|
-
|
2
|
+
Buttons are used to make actions apparent to the end user. It can be used to navigate users to a different page or to perform an action. Buttons can contain text, icons, or both.
|
3
3
|
|
4
4
|
## Overview
|
5
5
|
Native `<button>` or `<a>` elements are always used in order to provide an easy, accessible experience for users.
|
6
|
+
|
6
7
|
- `<a>` should be used for interactions that will navigate users to a new page or to a different target on the same page.
|
7
8
|
- `<button>` should be used when a clickable action is performed within the same page.
|
8
9
|
|
9
10
|
## Types
|
11
|
+
Button supports five types that change its visual style.
|
12
|
+
|
10
13
|
- `daff-button` - Rectangular contained button with background color
|
14
|
+
- `daff-flat-button` - Rectangular contained button with no outline or background color
|
11
15
|
- `daff-icon-button` - Icon button used with icon fonts
|
12
|
-
- `daff-raised-button` - Rectangular contained button with background color and elevation
|
13
16
|
- `daff-stroked-button` - Rectangular outlined button with no background color
|
14
17
|
|
15
18
|
### Basic Button
|
16
19
|
<design-land-example-viewer-container example="basic-button"></design-land-example-viewer-container>
|
17
20
|
|
18
|
-
###
|
21
|
+
### Flat Button
|
22
|
+
<design-land-example-viewer-container example="flat-button"></design-land-example-viewer-container>
|
23
|
+
|
24
|
+
### Stroked button
|
19
25
|
<design-land-example-viewer-container example="stroked-button"></design-land-example-viewer-container>
|
20
26
|
|
21
27
|
> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
|
22
28
|
|
23
|
-
###
|
24
|
-
<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
|
25
|
-
|
26
|
-
### Icon Button
|
29
|
+
### Icon button
|
27
30
|
<design-land-example-viewer-container example="icon-button"></design-land-example-viewer-container>
|
28
31
|
|
29
32
|
> `black`, `white`, and `theme` should be used with caution to ensure that there is sufficient contrast.
|
30
33
|
|
31
|
-
### Underline
|
34
|
+
### Underline button
|
32
35
|
<design-land-example-viewer-container example="underline-button"></design-land-example-viewer-container>
|
33
36
|
|
37
|
+
### Raised button (deprecated)
|
38
|
+
<design-land-example-viewer-container example="raised-button"></design-land-example-viewer-container>
|
39
|
+
|
34
40
|
## Usage
|
35
41
|
|
36
42
|
### Within a standalone component
|
37
|
-
To use button in a standalone component, import
|
43
|
+
To use button in a standalone component, import each button type directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
|
38
44
|
|
39
45
|
```ts
|
46
|
+
import { DaffButtonComponent } from '@daffodil/design/button';
|
47
|
+
|
40
48
|
@Component({
|
41
49
|
selector: 'custom-component',
|
42
50
|
templateUrl: './custom-component.component.html',
|
43
|
-
standalone: true,
|
44
51
|
imports: [
|
45
52
|
DaffButtonComponent,
|
46
53
|
],
|
@@ -53,8 +60,8 @@ To use button in a module, import `DaffButtonModule` into your custom module:
|
|
53
60
|
|
54
61
|
```ts
|
55
62
|
import { NgModule } from '@angular/core';
|
56
|
-
|
57
63
|
import { DaffButtonModule } from '@daffodil/design/button';
|
64
|
+
import { CustomComponent } from './custom.component';
|
58
65
|
|
59
66
|
@NgModule({
|
60
67
|
declarations: [
|
@@ -73,27 +80,40 @@ export class CustomComponentModule { }
|
|
73
80
|
> This method is deprecated. It's recommended to update all custom components to standalone.
|
74
81
|
|
75
82
|
## Sizes
|
76
|
-
|
77
|
-
|
78
|
-
Supported Sizes: `sm | md | lg`
|
83
|
+
Use the `size` property to specify a button size. Setting this property will change the height and padding of a button. The size of all variants will default to `md` if none is defined.
|
79
84
|
|
80
85
|
<design-land-example-viewer-container example="sizeable-button"></design-land-example-viewer-container>
|
81
86
|
|
82
|
-
##
|
83
|
-
|
84
|
-
|
85
|
-
Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
|
87
|
+
## Colors
|
88
|
+
Use the `color` property to change the color of a button. The default color is light gray.
|
86
89
|
|
87
90
|
> For select button types, `black` and `white` should be used on a darker background in order to have sufficient contrast.
|
88
91
|
|
89
|
-
## Status
|
90
|
-
Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context.
|
91
|
-
|
92
|
-
Supported statuses: `warn | critical | success`
|
92
|
+
## Status indicators
|
93
|
+
Buttons with status indicators can be used to distinguish what type of action it performs and its importance compared to other buttons in the same context. Use the `status` property to change the status.
|
93
94
|
|
94
95
|
<design-land-example-viewer-container example="statusable-button"></design-land-example-viewer-container>
|
95
96
|
|
97
|
+
## Elevation
|
98
|
+
Use the `elevated` property to add a shadow to buttons. Note that the `elevated` property is not supported for flat, icon, and underline buttons.
|
99
|
+
|
100
|
+
<design-land-example-viewer-container example="elevated-button"></design-land-example-viewer-container>
|
101
|
+
|
102
|
+
## Icon support
|
103
|
+
An icon can be rendered on either side of the button text content with the `daffPrefix` and `daffSuffix` selectors.
|
104
|
+
|
105
|
+
```html
|
106
|
+
<button daff-button>
|
107
|
+
<fa-icon [faIcon]="faUser" daffPrefix></fa-icon>
|
108
|
+
Button Content
|
109
|
+
<fa-icon [faIcon]="faUser" daffSuffix></fa-icon>
|
110
|
+
</button>
|
111
|
+
```
|
112
|
+
|
96
113
|
## Accessbility
|
97
|
-
Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default.
|
114
|
+
Daffodil uses native `<a>` and `<button>` HTML elements to ensure an accessible experience by default.
|
115
|
+
|
116
|
+
- The `<button>` element should be used when a clickable action is performed within the same page.
|
117
|
+
- The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
|
98
118
|
|
99
119
|
Buttons and links containing only icons (`<daff-icon-button>`) need to be given meaningful labels using `aria-label` or `aria-labelledby`.
|
@@ -23,6 +23,10 @@ export declare class DaffButtonComponent extends DaffButtonBaseDirective {
|
|
23
23
|
* @docs-private
|
24
24
|
*/
|
25
25
|
class: boolean;
|
26
|
+
/**
|
27
|
+
* Whether or not the button displays a shadow.
|
28
|
+
*/
|
29
|
+
elevated: boolean;
|
26
30
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonComponent, never>;
|
27
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
|
31
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffButtonComponent, "button[daff-button],a[daff-button]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
|
28
32
|
}
|
@@ -30,21 +30,29 @@ export declare class DaffButtonBaseDirective extends _daffButtonBase implements
|
|
30
30
|
get disabledClass(): any;
|
31
31
|
loading: boolean;
|
32
32
|
/**
|
33
|
-
*
|
33
|
+
* Sets the tabindex. Defaults to 0.
|
34
34
|
*/
|
35
35
|
tabindex: number;
|
36
|
-
_disabled
|
36
|
+
private _disabled;
|
37
37
|
/**
|
38
38
|
* The disabled state of the button.
|
39
39
|
*/
|
40
40
|
get disabled(): any;
|
41
41
|
set disabled(value: any);
|
42
|
+
/**
|
43
|
+
* @docs-private
|
44
|
+
*/
|
42
45
|
get disabledAttribute(): boolean;
|
46
|
+
/**
|
47
|
+
* @docs-private
|
48
|
+
*/
|
43
49
|
get ariaDisabled(): boolean;
|
44
50
|
/**
|
51
|
+
* @docs-private
|
52
|
+
*
|
45
53
|
* Set the `tabindex` to -1 if the button is disabled.
|
46
54
|
*/
|
47
|
-
get
|
55
|
+
get tabIndexAttribute(): number;
|
48
56
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
|
49
57
|
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "loading": { "alias": "loading"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
|
50
58
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { DaffSizableDirective, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType } from '@daffodil/design';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
-
* The
|
4
|
+
* The size types that the DaffButtonComponent can implement.
|
5
5
|
*/
|
6
6
|
export type DaffButtonSize = DaffSizeSmallType | DaffSizeMediumType | DaffSizeLargeType;
|
7
7
|
export declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButtonSize> {
|
@@ -1,6 +1,8 @@
|
|
1
1
|
import { DaffButtonBaseDirective } from '../button-base.directive';
|
2
2
|
import * as i0 from "@angular/core";
|
3
3
|
/**
|
4
|
+
* @deprecated in favor of the `elevated` property. Deprecated in 0.82.0. Will be removed in version 1.0.0. Deprecated in version 0.82.0. Will be removed in version 0.85.0.
|
5
|
+
*
|
4
6
|
* DaffRaisedButtonComponent is a rectangular contained button with background color and elevation.
|
5
7
|
*
|
6
8
|
* @example Raised button
|
@@ -23,6 +23,10 @@ export declare class DaffStrokedButtonComponent extends DaffButtonBaseDirective
|
|
23
23
|
* @docs-private
|
24
24
|
*/
|
25
25
|
class: boolean;
|
26
|
+
/**
|
27
|
+
* Whether or not the button displays a shadow.
|
28
|
+
*/
|
29
|
+
elevated: boolean;
|
26
30
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffStrokedButtonComponent, never>;
|
27
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, {}, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
|
31
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffStrokedButtonComponent, "button[daff-stroked-button],a[daff-stroked-button]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, ["[daffPrefix]", "*", "[daffSuffix]"], true, never>;
|
28
32
|
}
|
package/button/button.d.ts
CHANGED
@@ -1,8 +1,10 @@
|
|
1
|
-
import { DaffPrefixSuffixModule } from '@daffodil/design';
|
2
1
|
import { DaffButtonComponent } from './button/basic/button.component';
|
3
2
|
import { DaffFlatButtonComponent } from './button/flat/flat.component';
|
4
3
|
import { DaffIconButtonComponent } from './button/icon/icon.component';
|
5
4
|
import { DaffRaisedButtonComponent } from './button/raised/raised.component';
|
6
5
|
import { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
|
7
6
|
import { DaffUnderlineButtonComponent } from './button/underline/underline.component';
|
8
|
-
|
7
|
+
/**
|
8
|
+
* @docs-private
|
9
|
+
*/
|
10
|
+
export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];
|
@@ -6,12 +6,11 @@ import * as i4 from "./button/icon/icon.component";
|
|
6
6
|
import * as i5 from "./button/raised/raised.component";
|
7
7
|
import * as i6 from "./button/stroked/stroked.component";
|
8
8
|
import * as i7 from "./button/underline/underline.component";
|
9
|
-
import * as i8 from "@daffodil/design";
|
10
9
|
/**
|
11
10
|
* @deprecated in favor of {@link DAFF_BUTTON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
|
12
11
|
*/
|
13
12
|
export declare class DaffButtonModule {
|
14
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonModule, never>;
|
15
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent
|
14
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffButtonModule, never, [typeof i1.CommonModule, typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent], [typeof i2.DaffButtonComponent, typeof i3.DaffFlatButtonComponent, typeof i4.DaffIconButtonComponent, typeof i5.DaffRaisedButtonComponent, typeof i6.DaffStrokedButtonComponent, typeof i7.DaffUnderlineButtonComponent]>;
|
16
15
|
static ɵinj: i0.ɵɵInjectorDeclaration<DaffButtonModule>;
|
17
16
|
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class ElevatedButtonComponent {
|
3
|
+
faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ElevatedButtonComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ElevatedButtonComponent, "elevated-button", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import { BasicButtonComponent } from './basic-button/basic-button.component';
|
2
|
+
import { ElevatedButtonComponent } from './elevated-button/elevated-button.component';
|
2
3
|
import { IconButtonComponent } from './icon-button/icon-button.component';
|
3
4
|
import { StatusableButtonComponent } from './statusable-button/statusable-button.component';
|
4
|
-
export declare const BUTTON_EXAMPLES: (typeof BasicButtonComponent | typeof IconButtonComponent | typeof StatusableButtonComponent)[];
|
5
|
+
export declare const BUTTON_EXAMPLES: (typeof BasicButtonComponent | typeof ElevatedButtonComponent | typeof IconButtonComponent | typeof StatusableButtonComponent)[];
|
@@ -7,3 +7,4 @@ export { SizeableButtonComponent } from './sizeable-button/sizeable-button.compo
|
|
7
7
|
export { StatusableButtonComponent } from './statusable-button/statusable-button.component';
|
8
8
|
export { StrokedButtonComponent } from './stroked-button/stroked-button.component';
|
9
9
|
export { UnderlineButtonComponent } from './underline-button/underline-button.component';
|
10
|
+
export { ElevatedButtonComponent } from './elevated-button/elevated-button.component';
|
package/button/public_api.d.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
export { DaffButtonModule } from './button.module';
|
2
2
|
export { DAFF_BUTTON_COMPONENTS } from './button';
|
3
3
|
export { DaffButtonComponent } from './button/basic/button.component';
|
4
|
-
export { DaffButtonSizableDirective } from './button/button-sizable.directive';
|
5
4
|
export { DaffFlatButtonComponent } from './button/flat/flat.component';
|
6
5
|
export { DaffRaisedButtonComponent } from './button/raised/raised.component';
|
7
6
|
export { DaffStrokedButtonComponent } from './button/stroked/stroked.component';
|
@@ -40,106 +40,211 @@
|
|
40
40
|
$white: core.daff-map-get($theme, 'core', 'white');
|
41
41
|
$black: core.daff-map-get($theme, 'core', 'black');
|
42
42
|
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
43
|
+
$type: core.daff-map-get($theme, 'core', 'type');
|
43
44
|
|
44
45
|
.daff-button {
|
45
|
-
@include
|
46
|
-
theming.daff-illuminate($base, $neutral, 2),
|
47
|
-
theming.daff-illuminate($base, $neutral, 3),
|
48
|
-
theming.daff-illuminate($base, $neutral, 4)
|
49
|
-
);
|
50
|
-
|
51
|
-
&.daff-primary {
|
46
|
+
@include theming.light($type) {
|
52
47
|
@include daff-button-theme-variant(
|
53
|
-
theming.daff-color($
|
54
|
-
theming.daff-color($
|
55
|
-
theming.daff-color($
|
48
|
+
theming.daff-color($neutral, 20),
|
49
|
+
theming.daff-color($neutral, 30),
|
50
|
+
theming.daff-color($neutral, 40)
|
56
51
|
);
|
57
|
-
}
|
58
52
|
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
53
|
+
&.daff-primary {
|
54
|
+
@include daff-button-theme-variant(
|
55
|
+
theming.daff-color($primary),
|
56
|
+
theming.daff-color($primary, 70),
|
57
|
+
theming.daff-color($primary, 80)
|
58
|
+
);
|
59
|
+
}
|
66
60
|
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
61
|
+
&.daff-secondary {
|
62
|
+
@include daff-button-theme-variant(
|
63
|
+
theming.daff-color($secondary),
|
64
|
+
theming.daff-color($secondary, 70),
|
65
|
+
theming.daff-color($secondary, 80)
|
66
|
+
);
|
67
|
+
}
|
68
|
+
|
69
|
+
&.daff-tertiary {
|
70
|
+
@include daff-button-theme-variant(
|
71
|
+
theming.daff-color($tertiary),
|
72
|
+
theming.daff-color($tertiary, 70),
|
73
|
+
theming.daff-color($tertiary, 80)
|
74
|
+
);
|
75
|
+
}
|
76
|
+
|
77
|
+
&.daff-black {
|
78
|
+
@include daff-button-theme-variant(
|
79
|
+
$black,
|
80
|
+
theming.daff-color($neutral, 90),
|
81
|
+
theming.daff-color($neutral, 80)
|
82
|
+
);
|
83
|
+
}
|
84
|
+
|
85
|
+
&.daff-white {
|
86
|
+
@include daff-button-theme-variant(
|
87
|
+
$white,
|
88
|
+
theming.daff-color($neutral, 20),
|
89
|
+
theming.daff-color($neutral, 30)
|
90
|
+
);
|
91
|
+
}
|
92
|
+
|
93
|
+
&.daff-theme {
|
94
|
+
@include daff-button-theme-variant(
|
95
|
+
$base,
|
96
|
+
theming.daff-color($neutral, 20),
|
97
|
+
theming.daff-color($neutral, 30),
|
98
|
+
);
|
99
|
+
}
|
100
|
+
|
101
|
+
&.daff-theme-contrast {
|
102
|
+
@include daff-button-theme-variant(
|
103
|
+
$base-contrast,
|
104
|
+
theming.daff-color($neutral, 90),
|
105
|
+
theming.daff-color($neutral, 80),
|
106
|
+
);
|
107
|
+
}
|
108
|
+
|
109
|
+
&[disabled],
|
110
|
+
&.disabled {
|
111
|
+
@include daff-button-theme-variant(
|
112
|
+
theming.daff-color($neutral, 30),
|
113
|
+
theming.daff-color($neutral, 30),
|
114
|
+
theming.daff-color($neutral, 30),
|
115
|
+
);
|
116
|
+
color: theming.daff-color($neutral, 50);
|
117
|
+
|
118
|
+
&:hover {
|
119
|
+
color: theming.daff-color($neutral, 50);
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
&.daff-warn {
|
124
|
+
@include daff-button-theme-variant(
|
125
|
+
theming.daff-color($warn),
|
126
|
+
theming.daff-color($warn, 70),
|
127
|
+
theming.daff-color($warn, 80)
|
128
|
+
);
|
129
|
+
}
|
130
|
+
|
131
|
+
&.daff-success {
|
132
|
+
@include daff-button-theme-variant(
|
133
|
+
theming.daff-color($success),
|
134
|
+
theming.daff-color($success, 70),
|
135
|
+
theming.daff-color($success, 80)
|
136
|
+
);
|
137
|
+
}
|
138
|
+
|
139
|
+
&.daff-critical {
|
140
|
+
@include daff-button-theme-variant(
|
141
|
+
theming.daff-color($critical),
|
142
|
+
theming.daff-color($critical, 70),
|
143
|
+
theming.daff-color($critical, 80)
|
144
|
+
);
|
145
|
+
}
|
73
146
|
}
|
74
147
|
|
75
|
-
|
148
|
+
@include theming.dark($type) {
|
76
149
|
@include daff-button-theme-variant(
|
77
|
-
$black,
|
78
150
|
theming.daff-color($neutral, 90),
|
79
|
-
theming.daff-color($neutral, 80)
|
151
|
+
theming.daff-color($neutral, 80),
|
152
|
+
theming.daff-color($neutral, 70)
|
80
153
|
);
|
81
|
-
}
|
82
154
|
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
155
|
+
&.daff-primary {
|
156
|
+
@include daff-button-theme-variant(
|
157
|
+
theming.daff-color($primary),
|
158
|
+
theming.daff-color($primary, 40),
|
159
|
+
theming.daff-color($primary, 30)
|
160
|
+
);
|
161
|
+
}
|
90
162
|
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
163
|
+
&.daff-secondary {
|
164
|
+
@include daff-button-theme-variant(
|
165
|
+
theming.daff-color($secondary),
|
166
|
+
theming.daff-color($secondary, 40),
|
167
|
+
theming.daff-color($secondary, 30)
|
168
|
+
);
|
169
|
+
}
|
98
170
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
171
|
+
&.daff-tertiary {
|
172
|
+
@include daff-button-theme-variant(
|
173
|
+
theming.daff-color($tertiary),
|
174
|
+
theming.daff-color($tertiary, 40),
|
175
|
+
theming.daff-color($tertiary, 30)
|
176
|
+
);
|
177
|
+
}
|
106
178
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
color: theming.daff-illuminate($base, $neutral, 5);
|
179
|
+
&.daff-black {
|
180
|
+
@include daff-button-theme-variant(
|
181
|
+
$black,
|
182
|
+
theming.daff-color($neutral, 90),
|
183
|
+
theming.daff-color($neutral, 80)
|
184
|
+
);
|
185
|
+
}
|
115
186
|
|
116
|
-
|
117
|
-
|
187
|
+
&.daff-white {
|
188
|
+
@include daff-button-theme-variant(
|
189
|
+
$white,
|
190
|
+
theming.daff-color($neutral, 20),
|
191
|
+
theming.daff-color($neutral, 30)
|
192
|
+
);
|
118
193
|
}
|
119
|
-
}
|
120
194
|
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
195
|
+
&.daff-theme {
|
196
|
+
@include daff-button-theme-variant(
|
197
|
+
$base,
|
198
|
+
theming.daff-color($neutral, 90),
|
199
|
+
theming.daff-color($neutral, 80),
|
200
|
+
);
|
201
|
+
}
|
128
202
|
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
203
|
+
&.daff-theme-contrast {
|
204
|
+
@include daff-button-theme-variant(
|
205
|
+
$base-contrast,
|
206
|
+
theming.daff-color($neutral, 20),
|
207
|
+
theming.daff-color($neutral, 30),
|
208
|
+
);
|
209
|
+
}
|
136
210
|
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
211
|
+
&[disabled],
|
212
|
+
&.disabled {
|
213
|
+
@include daff-button-theme-variant(
|
214
|
+
theming.daff-color($neutral, 70),
|
215
|
+
theming.daff-color($neutral, 70),
|
216
|
+
theming.daff-color($neutral, 70),
|
217
|
+
);
|
218
|
+
color: theming.daff-color($neutral, 50);
|
219
|
+
|
220
|
+
&:hover {
|
221
|
+
color: theming.daff-color($neutral, 50);
|
222
|
+
}
|
223
|
+
}
|
224
|
+
|
225
|
+
&.daff-warn {
|
226
|
+
@include daff-button-theme-variant(
|
227
|
+
theming.daff-color($warn),
|
228
|
+
theming.daff-color($warn, 40),
|
229
|
+
theming.daff-color($warn, 30)
|
230
|
+
);
|
231
|
+
}
|
232
|
+
|
233
|
+
&.daff-success {
|
234
|
+
@include daff-button-theme-variant(
|
235
|
+
theming.daff-color($success),
|
236
|
+
theming.daff-color($success, 40),
|
237
|
+
theming.daff-color($success, 30)
|
238
|
+
);
|
239
|
+
}
|
240
|
+
|
241
|
+
&.daff-critical {
|
242
|
+
@include daff-button-theme-variant(
|
243
|
+
theming.daff-color($critical),
|
244
|
+
theming.daff-color($critical, 40),
|
245
|
+
theming.daff-color($critical, 30)
|
246
|
+
);
|
247
|
+
}
|
143
248
|
}
|
144
249
|
}
|
145
250
|
}
|