@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.
Files changed (258) hide show
  1. package/accordion/README.md +44 -29
  2. package/accordion/accordion/accordion/accordion.component.d.ts +3 -0
  3. package/accordion/accordion/accordion-item/accordion-item.component.d.ts +23 -12
  4. package/accordion/accordion/accordion-item-title/accordion-item-title.directive.d.ts +3 -0
  5. package/accordion/accordion.d.ts +5 -0
  6. package/accordion/examples/disabled-accordion/disabled-accordion.component.d.ts +5 -0
  7. package/accordion/examples/initially-expanded-accordion/initially-expanded-accordion.component.d.ts +5 -0
  8. package/accordion/examples/public_api.d.ts +2 -0
  9. package/accordion/src/accordion-theme.scss +28 -6
  10. package/article/README.md +4 -3
  11. package/article/article.d.ts +3 -0
  12. package/article/src/article-theme.scss +128 -51
  13. package/breadcrumb/README.md +38 -28
  14. package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +15 -2
  15. package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +18 -4
  16. package/breadcrumb/breadcrumb.d.ts +3 -0
  17. package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts +6 -0
  18. package/breadcrumb/public_api.d.ts +2 -2
  19. package/button/README.md +43 -23
  20. package/button/button/basic/button.component.d.ts +5 -1
  21. package/button/button/button-base.directive.d.ts +11 -3
  22. package/button/button/button-sizable.directive.d.ts +1 -1
  23. package/button/button/raised/raised.component.d.ts +2 -0
  24. package/button/button/stroked/stroked.component.d.ts +5 -1
  25. package/button/button.d.ts +4 -2
  26. package/button/button.module.d.ts +1 -2
  27. package/button/examples/elevated-button/elevated-button.component.d.ts +6 -0
  28. package/button/examples/examples.d.ts +2 -1
  29. package/button/examples/public_api.d.ts +1 -0
  30. package/button/public_api.d.ts +0 -1
  31. package/button/src/button/basic/button-theme.scss +185 -80
  32. package/button/src/button/button-base.scss +41 -16
  33. package/button/src/button/flat/flat-theme.scss +144 -85
  34. package/button/src/button/icon/icon-theme.scss +183 -79
  35. package/button/src/button/raised/raised-theme.scss +2 -7
  36. package/button/src/button/stroked/stroked-theme.scss +128 -94
  37. package/button/src/button/underline/underline-theme.scss +112 -44
  38. package/callout/README.md +4 -3
  39. package/callout/callout.d.ts +3 -0
  40. package/card/README.md +6 -3
  41. package/card/card/basic/basic.component.d.ts +7 -0
  42. package/card/card/raised/raised.component.d.ts +7 -0
  43. package/card/card/stroked/stroked.component.d.ts +7 -0
  44. package/card/card-base.directive.d.ts +25 -0
  45. package/card/card.d.ts +18 -1
  46. package/card/card.module.d.ts +10 -8
  47. package/card/examples/card-theming/card-theming.component.d.ts +2 -1
  48. package/card/examples/public_api.d.ts +1 -1
  49. package/card/public_api.d.ts +6 -1
  50. package/card/src/card/raised/raised-theme.scss +30 -0
  51. package/card/src/card/stroked/stroked-theme.scss +135 -0
  52. package/card/src/card-base-theme.scss +197 -0
  53. package/card/src/card-base.scss +134 -0
  54. package/container/README.md +5 -3
  55. package/container/container.d.ts +3 -0
  56. package/core/colorable/colorable.d.ts +20 -14
  57. package/core/colorable/colorable.directive.d.ts +9 -6
  58. package/fesm2022/daffodil-design-accordion-examples.mjs +28 -4
  59. package/fesm2022/daffodil-design-accordion-examples.mjs.map +1 -1
  60. package/fesm2022/daffodil-design-accordion.mjs +56 -29
  61. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  62. package/fesm2022/daffodil-design-article-examples.mjs +30 -30
  63. package/fesm2022/daffodil-design-article.mjs +14 -11
  64. package/fesm2022/daffodil-design-article.mjs.map +1 -1
  65. package/fesm2022/daffodil-design-breadcrumb-examples.mjs +24 -4
  66. package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -1
  67. package/fesm2022/daffodil-design-breadcrumb.mjs +78 -40
  68. package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
  69. package/fesm2022/daffodil-design-button-examples.mjs +55 -33
  70. package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
  71. package/fesm2022/daffodil-design-button.mjs +79 -69
  72. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  73. package/fesm2022/daffodil-design-callout-examples.mjs +12 -12
  74. package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
  75. package/fesm2022/daffodil-design-callout.mjs +25 -22
  76. package/fesm2022/daffodil-design-callout.mjs.map +1 -1
  77. package/fesm2022/daffodil-design-card-examples.mjs +35 -31
  78. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  79. package/fesm2022/daffodil-design-card.mjs +140 -86
  80. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  81. package/fesm2022/daffodil-design-checkbox-examples.mjs +6 -6
  82. package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
  83. package/fesm2022/daffodil-design-container-examples.mjs +3 -3
  84. package/fesm2022/daffodil-design-container.mjs +10 -7
  85. package/fesm2022/daffodil-design-container.mjs.map +1 -1
  86. package/fesm2022/daffodil-design-hero-examples.mjs +12 -12
  87. package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
  88. package/fesm2022/daffodil-design-hero.mjs +25 -22
  89. package/fesm2022/daffodil-design-hero.mjs.map +1 -1
  90. package/fesm2022/daffodil-design-image-examples.mjs +9 -9
  91. package/fesm2022/daffodil-design-image.mjs +36 -19
  92. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  93. package/fesm2022/daffodil-design-input-examples.mjs +12 -12
  94. package/fesm2022/daffodil-design-link-set.mjs +19 -16
  95. package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
  96. package/fesm2022/daffodil-design-list-examples.mjs +12 -12
  97. package/fesm2022/daffodil-design-list.mjs +13 -10
  98. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  99. package/fesm2022/daffodil-design-loading-icon-examples.mjs +4 -4
  100. package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
  101. package/fesm2022/daffodil-design-loading-icon.mjs +11 -8
  102. package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
  103. package/fesm2022/daffodil-design-media-gallery-examples.mjs +62 -13
  104. package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
  105. package/fesm2022/daffodil-design-media-gallery.mjs +204 -250
  106. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  107. package/fesm2022/daffodil-design-menu-examples.mjs +6 -6
  108. package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
  109. package/fesm2022/daffodil-design-menu.mjs +16 -16
  110. package/fesm2022/daffodil-design-modal-examples.mjs +7 -7
  111. package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
  112. package/fesm2022/daffodil-design-modal.mjs +28 -25
  113. package/fesm2022/daffodil-design-modal.mjs.map +1 -1
  114. package/fesm2022/daffodil-design-navbar-examples.mjs +12 -12
  115. package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
  116. package/fesm2022/daffodil-design-navbar.mjs +10 -7
  117. package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
  118. package/fesm2022/daffodil-design-notification-examples.mjs +17 -16
  119. package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
  120. package/fesm2022/daffodil-design-notification.mjs +23 -20
  121. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  122. package/fesm2022/daffodil-design-paginator-examples.mjs +6 -6
  123. package/fesm2022/daffodil-design-paginator.mjs +13 -7
  124. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  125. package/fesm2022/daffodil-design-progress-bar-examples.mjs +10 -10
  126. package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
  127. package/fesm2022/daffodil-design-progress-bar.mjs +13 -13
  128. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  129. package/fesm2022/daffodil-design-quantity-field-examples.mjs +12 -12
  130. package/fesm2022/daffodil-design-radio-examples.mjs +3 -3
  131. package/fesm2022/daffodil-design-sidebar-examples.mjs +14 -14
  132. package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
  133. package/fesm2022/daffodil-design-sidebar.mjs +150 -61
  134. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  135. package/fesm2022/daffodil-design-switch-examples.mjs +15 -15
  136. package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -1
  137. package/fesm2022/daffodil-design-switch.mjs +38 -10
  138. package/fesm2022/daffodil-design-switch.mjs.map +1 -1
  139. package/fesm2022/daffodil-design-tabs-examples.mjs +23 -17
  140. package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -1
  141. package/fesm2022/daffodil-design-tabs.mjs +67 -35
  142. package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
  143. package/fesm2022/daffodil-design-text-snippet-examples.mjs +3 -3
  144. package/fesm2022/daffodil-design-text-snippet.mjs +4 -5
  145. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
  146. package/fesm2022/daffodil-design-toast-examples.mjs +40 -15
  147. package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
  148. package/fesm2022/daffodil-design-toast.mjs +296 -239
  149. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  150. package/fesm2022/daffodil-design-tree-examples.mjs +6 -6
  151. package/fesm2022/daffodil-design-tree.mjs +15 -12
  152. package/fesm2022/daffodil-design-tree.mjs.map +1 -1
  153. package/fesm2022/daffodil-design-youtube-player.mjs +104 -0
  154. package/fesm2022/daffodil-design-youtube-player.mjs.map +1 -0
  155. package/fesm2022/daffodil-design.mjs +167 -155
  156. package/fesm2022/daffodil-design.mjs.map +1 -1
  157. package/hero/README.md +4 -3
  158. package/hero/hero.d.ts +3 -0
  159. package/image/README.md +4 -3
  160. package/image/image/image.component.d.ts +22 -1
  161. package/image/image.d.ts +3 -0
  162. package/link-set/README.md +4 -3
  163. package/link-set/link-set.d.ts +3 -0
  164. package/list/README.md +4 -3
  165. package/list/list.d.ts +3 -0
  166. package/loading-icon/README.md +10 -7
  167. package/loading-icon/loading-icon.d.ts +3 -0
  168. package/loading-icon/src/loading-icon-theme.scss +66 -38
  169. package/media-gallery/README.md +19 -10
  170. package/media-gallery/examples/iterated-media-gallery/iterated-media-gallery.component.d.ts +13 -0
  171. package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts +5 -0
  172. package/media-gallery/examples/public_api.d.ts +2 -0
  173. package/media-gallery/helpers/media-gallery-registration.interface.d.ts +1 -1
  174. package/media-gallery/media-gallery/media-gallery.component.d.ts +89 -11
  175. package/media-gallery/media-gallery.d.ts +4 -2
  176. package/media-gallery/media-gallery.module.d.ts +1 -2
  177. package/media-gallery/public_api.d.ts +3 -4
  178. package/media-gallery/src/media-gallery-theme.scss +30 -4
  179. package/media-gallery/thumbnail/thumbnail.directive.d.ts +45 -22
  180. package/menu/README.md +1 -2
  181. package/modal/README.md +3 -2
  182. package/modal/modal.d.ts +3 -0
  183. package/navbar/README.md +3 -2
  184. package/navbar/navbar.d.ts +3 -0
  185. package/notification/README.md +5 -4
  186. package/notification/notification.d.ts +3 -0
  187. package/notification/src/notification-theme.scss +62 -23
  188. package/package.json +1 -1
  189. package/paginator/README.md +3 -2
  190. package/paginator/paginator/paginator.component.d.ts +3 -0
  191. package/paginator/paginator.d.ts +3 -0
  192. package/progress-bar/README.md +5 -6
  193. package/progress-bar/progress-bar.component.d.ts +0 -3
  194. package/progress-bar/progress-bar.d.ts +3 -0
  195. package/progress-bar/src/progress-bar-theme.scss +17 -8
  196. package/scss/theme.scss +36 -17
  197. package/scss/theming/_configure-theme.scss +2 -0
  198. package/scss/theming/_index.scss +1 -0
  199. package/scss/theming/_light-dark.scss +45 -0
  200. package/sidebar/README.md +20 -21
  201. package/sidebar/helper/sidebar-mode.d.ts +9 -15
  202. package/sidebar/public_api.d.ts +10 -11
  203. package/sidebar/sidebar/sidebar.component.d.ts +22 -7
  204. package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +11 -0
  205. package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts +8 -0
  206. package/sidebar/sidebar-header/sidebar-header.component.d.ts +19 -1
  207. package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +36 -15
  208. package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts +17 -0
  209. package/sidebar/sidebar.d.ts +4 -2
  210. package/sidebar/sidebar.module.d.ts +1 -2
  211. package/switch/README.md +3 -2
  212. package/switch/src/switch-theme.scss +29 -10
  213. package/switch/switch/switch.component.d.ts +31 -6
  214. package/switch/switch.d.ts +3 -0
  215. package/tabs/README.md +33 -3
  216. package/tabs/src/tabs-theme.scss +31 -13
  217. package/tabs/tabs/tab/tab.component.d.ts +1 -1
  218. package/tabs/tabs/tab-label/tab-label.component.d.ts +6 -0
  219. package/tabs/tabs/tab-panel/tab-panel.component.d.ts +8 -0
  220. package/tabs/tabs/tabs.component.d.ts +21 -4
  221. package/tabs/tabs.d.ts +8 -2
  222. package/text-snippet/README.md +19 -1
  223. package/toast/README.md +21 -151
  224. package/toast/examples/dismissible-toast/dismissible-toast.component.d.ts +11 -0
  225. package/toast/examples/public_api.d.ts +2 -1
  226. package/toast/interfaces/toast-action.d.ts +22 -11
  227. package/toast/interfaces/toast-action.type.d.ts +10 -0
  228. package/toast/interfaces/toast.d.ts +11 -5
  229. package/toast/options/daff-toast-options.d.ts +2 -1
  230. package/toast/public_api.d.ts +2 -6
  231. package/toast/service/position.service.d.ts +9 -1
  232. package/toast/service/toast.service.d.ts +63 -0
  233. package/toast/src/toast-theme.scss +80 -33
  234. package/toast/toast/toast-config.d.ts +24 -1
  235. package/toast/toast/toast-provider.d.ts +16 -0
  236. package/toast/toast/toast.component.d.ts +20 -1
  237. package/toast/toast-actions/toast-actions.directive.d.ts +3 -0
  238. package/toast/toast-message/toast-message.directive.d.ts +3 -0
  239. package/toast/toast-title/toast-title.directive.d.ts +3 -0
  240. package/tree/README.md +6 -10
  241. package/tree/src/tree-theme.scss +39 -13
  242. package/tree/tree.d.ts +3 -0
  243. package/youtube-player/index.d.ts +1 -0
  244. package/youtube-player/public_api.d.ts +3 -0
  245. package/youtube-player/safe-url.pipe.d.ts +10 -0
  246. package/youtube-player/youtube-player.component.d.ts +23 -0
  247. package/youtube-player/youtube-player.d.ts +6 -0
  248. package/card/card/card.component.d.ts +0 -48
  249. package/card/src/card-theme-variants/basic-card.scss +0 -6
  250. package/card/src/card-theme-variants/linkable-card.scss +0 -16
  251. package/card/src/card-theme-variants/stroked-card.scss +0 -3
  252. package/card/src/card-theme.scss +0 -170
  253. package/media-gallery/media-renderer/media-renderer.component.d.ts +0 -29
  254. package/media-gallery/registry/media-gallery.registry.d.ts +0 -34
  255. package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +0 -1
  256. package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts +0 -9
  257. package/scss/theming/prebuilt/internal-theme.scss +0 -13
  258. 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 * from './breadcrumb/breadcrumb.component';
2
- export * from './breadcrumb-item/breadcrumb-item.directive';
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
- The button is used for making 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.
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
- ### Stroked Button
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
- ### Raised Button
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 Button
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 it directly into your custom component. Buttons can be imported individually or all together by using `DAFF_BUTTON_COMPONENTS`:
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
- The size of a button can be changed by using the `size` property. The size of all the button variants will default to `md` if no size is defined. This can be changed to one of the supported sizes.
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
- ## Theming
83
- The default color of a button is light gray, but it can be updated to one of the supported colors by using the `color` property.
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 Indicators
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. The `<button>` element should be used when a clickable action is performed within the same page. The `<a>` element should be used to navigate users to a new page or to a different target on the same page.
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
- * Set the `tabindex` to 0.
33
+ * Sets the tabindex. Defaults to 0.
34
34
  */
35
35
  tabindex: number;
36
- _disabled: boolean;
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 disabledTabIndex(): number;
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 DaffSizable {@link DaffSizable } types that the DaffButtonComponent can implement.
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
  }
@@ -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
- export declare const DAFF_BUTTON_COMPONENTS: readonly [typeof DaffButtonComponent, typeof DaffPrefixSuffixModule, typeof DaffFlatButtonComponent, typeof DaffIconButtonComponent, typeof DaffRaisedButtonComponent, typeof DaffStrokedButtonComponent, typeof DaffUnderlineButtonComponent];
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, typeof i8.DaffPrefixSuffixModule]>;
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';
@@ -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 daff-button-theme-variant(
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($primary),
54
- theming.daff-color($primary, 70),
55
- theming.daff-color($primary, 80)
48
+ theming.daff-color($neutral, 20),
49
+ theming.daff-color($neutral, 30),
50
+ theming.daff-color($neutral, 40)
56
51
  );
57
- }
58
52
 
59
- &.daff-secondary {
60
- @include daff-button-theme-variant(
61
- theming.daff-color($secondary),
62
- theming.daff-color($secondary, 70),
63
- theming.daff-color($secondary, 80)
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
- &.daff-tertiary {
68
- @include daff-button-theme-variant(
69
- theming.daff-color($tertiary),
70
- theming.daff-color($tertiary, 70),
71
- theming.daff-color($tertiary, 80)
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
- &.daff-black {
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
- &.daff-white {
84
- @include daff-button-theme-variant(
85
- $white,
86
- theming.daff-color($neutral, 20),
87
- theming.daff-color($neutral, 30)
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
- &.daff-theme {
92
- @include daff-button-theme-variant(
93
- $base,
94
- theming.daff-illuminate($base, $neutral, 2),
95
- theming.daff-illuminate($base, $neutral, 3)
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
- &.daff-theme-contrast {
100
- @include daff-button-theme-variant(
101
- $base-contrast,
102
- theming.daff-illuminate($base-contrast, $neutral, 2),
103
- theming.daff-illuminate($base-contrast, $neutral, 3)
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
- &[disabled],
108
- &.disabled {
109
- @include daff-button-theme-variant(
110
- theming.daff-illuminate($base, $neutral, 3),
111
- theming.daff-illuminate($base, $neutral, 3),
112
- theming.daff-illuminate($base, $neutral, 3)
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
- &:hover {
117
- color: theming.daff-illuminate($base, $neutral, 5);
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
- &.daff-warn {
122
- @include daff-button-theme-variant(
123
- theming.daff-color($warn),
124
- theming.daff-color($warn, 70),
125
- theming.daff-color($warn, 80)
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
- &.daff-success {
130
- @include daff-button-theme-variant(
131
- theming.daff-color($success),
132
- theming.daff-color($success, 70),
133
- theming.daff-color($success, 80)
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
- &.daff-critical {
138
- @include daff-button-theme-variant(
139
- theming.daff-color($critical),
140
- theming.daff-color($critical, 70),
141
- theming.daff-color($critical, 80)
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
  }