@daffodil/design 0.81.0 → 0.82.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 (243) 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/article/README.md +4 -3
  10. package/article/article.d.ts +3 -0
  11. package/article/src/article-theme.scss +25 -2
  12. package/breadcrumb/README.md +38 -28
  13. package/breadcrumb/breadcrumb/breadcrumb.component.d.ts +15 -2
  14. package/breadcrumb/breadcrumb-item/breadcrumb-item.directive.d.ts +18 -4
  15. package/breadcrumb/breadcrumb.d.ts +3 -0
  16. package/breadcrumb/examples/iterated-breadcrumb/iterated-breadcrumb.component.d.ts +6 -0
  17. package/breadcrumb/public_api.d.ts +2 -2
  18. package/button/README.md +43 -23
  19. package/button/button/basic/button.component.d.ts +5 -1
  20. package/button/button/button-base.directive.d.ts +11 -3
  21. package/button/button/button-sizable.directive.d.ts +1 -1
  22. package/button/button/raised/raised.component.d.ts +2 -0
  23. package/button/button/stroked/stroked.component.d.ts +5 -1
  24. package/button/button.d.ts +4 -2
  25. package/button/button.module.d.ts +1 -2
  26. package/button/examples/elevated-button/elevated-button.component.d.ts +6 -0
  27. package/button/examples/examples.d.ts +2 -1
  28. package/button/examples/public_api.d.ts +1 -0
  29. package/button/public_api.d.ts +0 -1
  30. package/button/src/button/basic/button-theme.scss +180 -80
  31. package/button/src/button/button-base.scss +26 -15
  32. package/button/src/button/flat/flat-theme.scss +144 -85
  33. package/button/src/button/raised/raised-theme.scss +2 -7
  34. package/button/src/button/stroked/stroked-theme.scss +126 -92
  35. package/button/src/button/underline/underline-theme.scss +112 -44
  36. package/callout/README.md +4 -3
  37. package/callout/callout.d.ts +3 -0
  38. package/card/README.md +6 -3
  39. package/card/card/basic/basic.component.d.ts +7 -0
  40. package/card/card/raised/raised.component.d.ts +7 -0
  41. package/card/card/stroked/stroked.component.d.ts +7 -0
  42. package/card/card-base.directive.d.ts +25 -0
  43. package/card/card.d.ts +18 -1
  44. package/card/card.module.d.ts +10 -8
  45. package/card/public_api.d.ts +6 -1
  46. package/card/src/card/raised/raised-theme.scss +30 -0
  47. package/card/src/card/stroked/stroked-theme.scss +46 -0
  48. package/card/src/card-base-theme.scss +126 -0
  49. package/card/src/card-base.scss +134 -0
  50. package/container/README.md +5 -3
  51. package/container/container.d.ts +3 -0
  52. package/core/colorable/colorable.d.ts +20 -14
  53. package/core/colorable/colorable.directive.d.ts +9 -6
  54. package/fesm2022/daffodil-design-accordion-examples.mjs +28 -4
  55. package/fesm2022/daffodil-design-accordion-examples.mjs.map +1 -1
  56. package/fesm2022/daffodil-design-accordion.mjs +56 -29
  57. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  58. package/fesm2022/daffodil-design-article-examples.mjs +30 -30
  59. package/fesm2022/daffodil-design-article.mjs +14 -11
  60. package/fesm2022/daffodil-design-article.mjs.map +1 -1
  61. package/fesm2022/daffodil-design-breadcrumb-examples.mjs +24 -4
  62. package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +1 -1
  63. package/fesm2022/daffodil-design-breadcrumb.mjs +78 -40
  64. package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
  65. package/fesm2022/daffodil-design-button-examples.mjs +55 -33
  66. package/fesm2022/daffodil-design-button-examples.mjs.map +1 -1
  67. package/fesm2022/daffodil-design-button.mjs +79 -69
  68. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  69. package/fesm2022/daffodil-design-callout-examples.mjs +12 -12
  70. package/fesm2022/daffodil-design-callout-examples.mjs.map +1 -1
  71. package/fesm2022/daffodil-design-callout.mjs +25 -22
  72. package/fesm2022/daffodil-design-callout.mjs.map +1 -1
  73. package/fesm2022/daffodil-design-card-examples.mjs +23 -21
  74. package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
  75. package/fesm2022/daffodil-design-card.mjs +140 -86
  76. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  77. package/fesm2022/daffodil-design-checkbox-examples.mjs +6 -6
  78. package/fesm2022/daffodil-design-checkbox-examples.mjs.map +1 -1
  79. package/fesm2022/daffodil-design-container-examples.mjs +3 -3
  80. package/fesm2022/daffodil-design-container.mjs +10 -7
  81. package/fesm2022/daffodil-design-container.mjs.map +1 -1
  82. package/fesm2022/daffodil-design-hero-examples.mjs +12 -12
  83. package/fesm2022/daffodil-design-hero-examples.mjs.map +1 -1
  84. package/fesm2022/daffodil-design-hero.mjs +25 -22
  85. package/fesm2022/daffodil-design-hero.mjs.map +1 -1
  86. package/fesm2022/daffodil-design-image-examples.mjs +9 -9
  87. package/fesm2022/daffodil-design-image.mjs +36 -19
  88. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  89. package/fesm2022/daffodil-design-input-examples.mjs +12 -12
  90. package/fesm2022/daffodil-design-link-set.mjs +19 -16
  91. package/fesm2022/daffodil-design-link-set.mjs.map +1 -1
  92. package/fesm2022/daffodil-design-list-examples.mjs +12 -12
  93. package/fesm2022/daffodil-design-list.mjs +13 -10
  94. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  95. package/fesm2022/daffodil-design-loading-icon-examples.mjs +4 -4
  96. package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +1 -1
  97. package/fesm2022/daffodil-design-loading-icon.mjs +11 -8
  98. package/fesm2022/daffodil-design-loading-icon.mjs.map +1 -1
  99. package/fesm2022/daffodil-design-media-gallery-examples.mjs +62 -13
  100. package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +1 -1
  101. package/fesm2022/daffodil-design-media-gallery.mjs +165 -250
  102. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  103. package/fesm2022/daffodil-design-menu-examples.mjs +6 -6
  104. package/fesm2022/daffodil-design-menu-examples.mjs.map +1 -1
  105. package/fesm2022/daffodil-design-menu.mjs +16 -16
  106. package/fesm2022/daffodil-design-modal-examples.mjs +7 -7
  107. package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
  108. package/fesm2022/daffodil-design-modal.mjs +28 -25
  109. package/fesm2022/daffodil-design-modal.mjs.map +1 -1
  110. package/fesm2022/daffodil-design-navbar-examples.mjs +12 -12
  111. package/fesm2022/daffodil-design-navbar-examples.mjs.map +1 -1
  112. package/fesm2022/daffodil-design-navbar.mjs +10 -7
  113. package/fesm2022/daffodil-design-navbar.mjs.map +1 -1
  114. package/fesm2022/daffodil-design-notification-examples.mjs +15 -15
  115. package/fesm2022/daffodil-design-notification.mjs +22 -19
  116. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  117. package/fesm2022/daffodil-design-paginator-examples.mjs +6 -6
  118. package/fesm2022/daffodil-design-paginator.mjs +13 -7
  119. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  120. package/fesm2022/daffodil-design-progress-bar-examples.mjs +9 -9
  121. package/fesm2022/daffodil-design-progress-bar.mjs +13 -10
  122. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  123. package/fesm2022/daffodil-design-quantity-field-examples.mjs +12 -12
  124. package/fesm2022/daffodil-design-radio-examples.mjs +3 -3
  125. package/fesm2022/daffodil-design-sidebar-examples.mjs +14 -14
  126. package/fesm2022/daffodil-design-sidebar-examples.mjs.map +1 -1
  127. package/fesm2022/daffodil-design-sidebar.mjs +147 -53
  128. package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
  129. package/fesm2022/daffodil-design-switch-examples.mjs +15 -15
  130. package/fesm2022/daffodil-design-switch-examples.mjs.map +1 -1
  131. package/fesm2022/daffodil-design-switch.mjs +6 -3
  132. package/fesm2022/daffodil-design-switch.mjs.map +1 -1
  133. package/fesm2022/daffodil-design-tabs-examples.mjs +23 -17
  134. package/fesm2022/daffodil-design-tabs-examples.mjs.map +1 -1
  135. package/fesm2022/daffodil-design-tabs.mjs +66 -34
  136. package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
  137. package/fesm2022/daffodil-design-text-snippet-examples.mjs +3 -3
  138. package/fesm2022/daffodil-design-text-snippet.mjs +4 -5
  139. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
  140. package/fesm2022/daffodil-design-toast-examples.mjs +40 -15
  141. package/fesm2022/daffodil-design-toast-examples.mjs.map +1 -1
  142. package/fesm2022/daffodil-design-toast.mjs +301 -245
  143. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  144. package/fesm2022/daffodil-design-tree-examples.mjs +6 -6
  145. package/fesm2022/daffodil-design-tree.mjs +13 -10
  146. package/fesm2022/daffodil-design-tree.mjs.map +1 -1
  147. package/fesm2022/daffodil-design-youtube-player.mjs +104 -0
  148. package/fesm2022/daffodil-design-youtube-player.mjs.map +1 -0
  149. package/fesm2022/daffodil-design.mjs +167 -155
  150. package/fesm2022/daffodil-design.mjs.map +1 -1
  151. package/hero/README.md +4 -3
  152. package/hero/hero.d.ts +3 -0
  153. package/image/README.md +4 -3
  154. package/image/image/image.component.d.ts +22 -1
  155. package/image/image.d.ts +3 -0
  156. package/link-set/README.md +4 -3
  157. package/link-set/link-set.d.ts +3 -0
  158. package/list/README.md +4 -3
  159. package/list/list.d.ts +3 -0
  160. package/loading-icon/README.md +10 -7
  161. package/loading-icon/loading-icon.d.ts +3 -0
  162. package/loading-icon/src/loading-icon-theme.scss +66 -38
  163. package/media-gallery/README.md +17 -8
  164. package/media-gallery/examples/iterated-media-gallery/iterated-media-gallery.component.d.ts +13 -0
  165. package/media-gallery/examples/media-gallery-with-video/media-gallery-with-video.component.d.ts +5 -0
  166. package/media-gallery/examples/public_api.d.ts +2 -0
  167. package/media-gallery/helpers/media-gallery-registration.interface.d.ts +1 -1
  168. package/media-gallery/media-gallery/media-gallery.component.d.ts +73 -11
  169. package/media-gallery/media-gallery.d.ts +4 -2
  170. package/media-gallery/media-gallery.module.d.ts +1 -2
  171. package/media-gallery/public_api.d.ts +0 -1
  172. package/media-gallery/src/media-gallery-theme.scss +30 -4
  173. package/media-gallery/thumbnail/thumbnail.directive.d.ts +29 -23
  174. package/menu/README.md +1 -2
  175. package/modal/README.md +3 -2
  176. package/modal/modal.d.ts +3 -0
  177. package/navbar/README.md +3 -2
  178. package/navbar/navbar.d.ts +3 -0
  179. package/notification/README.md +5 -4
  180. package/notification/notification.d.ts +3 -0
  181. package/package.json +1 -1
  182. package/paginator/README.md +3 -2
  183. package/paginator/paginator/paginator.component.d.ts +3 -0
  184. package/paginator/paginator.d.ts +3 -0
  185. package/progress-bar/README.md +3 -2
  186. package/progress-bar/progress-bar.d.ts +3 -0
  187. package/scss/theme.scss +36 -17
  188. package/scss/theming/_configure-theme.scss +2 -0
  189. package/scss/theming/_index.scss +1 -0
  190. package/scss/theming/_light-dark.scss +45 -0
  191. package/sidebar/README.md +20 -21
  192. package/sidebar/helper/sidebar-mode.d.ts +9 -15
  193. package/sidebar/sidebar/sidebar.component.d.ts +22 -7
  194. package/sidebar/sidebar-footer/sidebar-footer.component.d.ts +11 -0
  195. package/sidebar/sidebar-header/sidebar-header-title/sidebar-header-title.directive.d.ts +8 -0
  196. package/sidebar/sidebar-header/sidebar-header.component.d.ts +19 -1
  197. package/sidebar/sidebar-viewport/sidebar-viewport.component.d.ts +36 -15
  198. package/sidebar/sidebar-viewport-backdrop/sidebar-viewport-backdrop.component.d.ts +17 -0
  199. package/sidebar/sidebar.d.ts +3 -0
  200. package/switch/README.md +3 -2
  201. package/switch/switch.d.ts +3 -0
  202. package/tabs/README.md +33 -3
  203. package/tabs/tabs/tab/tab.component.d.ts +1 -1
  204. package/tabs/tabs/tab-label/tab-label.component.d.ts +6 -0
  205. package/tabs/tabs/tab-panel/tab-panel.component.d.ts +8 -0
  206. package/tabs/tabs/tabs.component.d.ts +21 -4
  207. package/tabs/tabs.d.ts +8 -2
  208. package/text-snippet/README.md +19 -1
  209. package/toast/README.md +21 -151
  210. package/toast/examples/dismissible-toast/dismissible-toast.component.d.ts +11 -0
  211. package/toast/examples/public_api.d.ts +2 -1
  212. package/toast/interfaces/toast-action.d.ts +22 -11
  213. package/toast/interfaces/toast-action.type.d.ts +10 -0
  214. package/toast/interfaces/toast.d.ts +11 -5
  215. package/toast/options/daff-toast-options.d.ts +2 -1
  216. package/toast/public_api.d.ts +2 -6
  217. package/toast/service/position.service.d.ts +9 -1
  218. package/toast/service/toast.service.d.ts +63 -0
  219. package/toast/toast/toast-config.d.ts +24 -1
  220. package/toast/toast/toast-provider.d.ts +16 -0
  221. package/toast/toast/toast-template.component.d.ts +1 -3
  222. package/toast/toast/toast.component.d.ts +20 -1
  223. package/toast/toast-actions/toast-actions.directive.d.ts +3 -0
  224. package/toast/toast-message/toast-message.directive.d.ts +3 -0
  225. package/toast/toast-title/toast-title.directive.d.ts +3 -0
  226. package/tree/README.md +6 -10
  227. package/tree/tree.d.ts +3 -0
  228. package/youtube-player/index.d.ts +1 -0
  229. package/youtube-player/public_api.d.ts +3 -0
  230. package/youtube-player/safe-url.pipe.d.ts +10 -0
  231. package/youtube-player/youtube-player.component.d.ts +23 -0
  232. package/youtube-player/youtube-player.d.ts +6 -0
  233. package/card/card/card.component.d.ts +0 -48
  234. package/card/src/card-theme-variants/basic-card.scss +0 -6
  235. package/card/src/card-theme-variants/linkable-card.scss +0 -16
  236. package/card/src/card-theme-variants/stroked-card.scss +0 -3
  237. package/card/src/card-theme.scss +0 -170
  238. package/media-gallery/media-renderer/media-renderer.component.d.ts +0 -29
  239. package/media-gallery/registry/media-gallery.registry.d.ts +0 -34
  240. package/media-gallery/thumbnail/thumbnail-compat.token.d.ts +0 -1
  241. package/media-gallery/thumbnail/thumbnail-registration.interface.d.ts +0 -9
  242. package/scss/theming/prebuilt/internal-theme.scss +0 -13
  243. package/toast/toast.module.d.ts +0 -19
@@ -0,0 +1,134 @@
1
+ @use '../../scss/typography' as t;
2
+ @use '../../scss/layout';
3
+
4
+ $card-border-radius: 8px;
5
+ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
6
+
7
+ @mixin daff-card-base {
8
+ display: flex;
9
+ border-radius: $card-border-radius;
10
+ position: relative;
11
+
12
+ .daff-card__image {
13
+ display: inline-block;
14
+ width: 100%;
15
+ }
16
+
17
+ .daff-card__wrapper {
18
+ position: relative;
19
+ height: 100%;
20
+
21
+ &::after {
22
+ content: '';
23
+ position: absolute;
24
+ left: 0;
25
+ top: 0;
26
+ height: 100%;
27
+ border-radius: $card-border-radius;
28
+ opacity: 0;
29
+ width: 100%;
30
+ transition: opacity 300ms;
31
+ z-index: 1;
32
+ }
33
+ }
34
+
35
+ &.vertical {
36
+ flex-direction: column;
37
+
38
+ .daff-card__image {
39
+ border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
40
+
41
+ img {
42
+ border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
43
+ }
44
+ }
45
+ }
46
+
47
+ &.horizontal {
48
+ flex-wrap: wrap;
49
+
50
+ @include layout.breakpoint(mobile) {
51
+ flex-direction: row;
52
+ flex-wrap: nowrap;
53
+ }
54
+
55
+ .daff-card__image {
56
+ border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
57
+
58
+ img {
59
+ border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
60
+ object-fit: cover;
61
+ object-position: center center;
62
+ height: 100% !important; /* stylelint-disable-line declaration-no-important */
63
+ width: 100%;
64
+ }
65
+ }
66
+ }
67
+
68
+ .daff-card__body {
69
+ padding: 1.5rem;
70
+ position: relative;
71
+ z-index: 2;
72
+ }
73
+
74
+ .daff-card__icon {
75
+ display: block;
76
+ margin: 0 0 0.5rem;
77
+ }
78
+
79
+ .daff-card__tagline {
80
+ @include t.subheading;
81
+ padding: 0;
82
+ margin: 0 0 0.25rem;
83
+ }
84
+
85
+ .daff-card__title {
86
+ font-size: 1.25rem;
87
+ font-weight: 600;
88
+ line-height: 1.5rem;
89
+
90
+ + .daff-card__content {
91
+ margin: 1rem 0 0;
92
+ }
93
+ }
94
+
95
+ .daff-card__content {
96
+ p {
97
+ &:first-of-type {
98
+ margin-top: 0;
99
+ }
100
+
101
+ &:last-of-type {
102
+ margin-bottom: 0;
103
+ }
104
+ }
105
+ }
106
+
107
+ .daff-card__actions {
108
+ padding: 0 1.5rem 1.5rem;
109
+ position: relative;
110
+ z-index: 2;
111
+ }
112
+ }
113
+
114
+ @mixin daff-linked-card-base {
115
+ text-decoration: none;
116
+
117
+ .daff-card__image {
118
+ + .daff-card__wrapper {
119
+ &::after {
120
+ border-radius: 0 0 $card-border-radius $card-border-radius;
121
+ }
122
+ }
123
+ }
124
+
125
+ &.horizontal {
126
+ .daff-card__image {
127
+ + .daff-card__wrapper {
128
+ &::after {
129
+ border-radius: 0 $card-border-radius $card-border-radius 0;
130
+ }
131
+ }
132
+ }
133
+ }
134
+ }
@@ -23,13 +23,15 @@ Supported sizes: `xs | sm | md | lg | xl`
23
23
  ## Usage
24
24
 
25
25
  ### Within a standalone component
26
- To use container in a standalone component, import it directly into your custom component:
26
+ To use container in a standalone component, import `DAFF_CONTAINER_COMPONENTS` directly into your custom component:
27
27
 
28
28
  ```ts
29
+
30
+ import { DAFF_CONTAINER_COMPONENTS } from '@daffodil/design/container';
31
+
29
32
  @Component({
30
33
  selector: 'custom-component',
31
34
  templateUrl: './custom-component.component.html',
32
- standalone: true,
33
35
  imports: [
34
36
  DAFF_CONTAINER_COMPONENTS,
35
37
  ],
@@ -42,8 +44,8 @@ To use container in a module, import `DaffCalloutModule` into your custom module
42
44
 
43
45
  ```ts
44
46
  import { NgModule } from '@angular/core';
45
-
46
47
  import { DaffCalloutModule } from '@daffodil/design/container';
48
+ import { CustomComponent } from './custom.component';
47
49
 
48
50
  @NgModule({
49
51
  declarations: [
@@ -1,2 +1,5 @@
1
1
  import { DaffContainerComponent } from './container/container.component';
2
+ /**
3
+ * @docs-private
4
+ */
2
5
  export declare const DAFF_CONTAINER_COMPONENTS: readonly [typeof DaffContainerComponent];
@@ -1,17 +1,13 @@
1
- /**
2
- * In order to be colorable, our class must implement this property
3
- */
4
1
  export interface DaffColorable {
5
2
  color: DaffPalette;
6
3
  }
7
4
  /**
8
- * These are the valid options that can be passed to a DaffColorable component
5
+ * These are the valid options that can be passed to a DaffColorable component.
9
6
  */
10
- export type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'black' | 'white' | 'theme' | 'theme-contrast' | undefined;
7
+ export type DaffPalette = 'primary' | 'secondary' | 'tertiary' | 'light' | 'dark' | 'theme' | 'theme-contrast' | 'black' | 'white' | undefined;
11
8
  /**
12
9
  * Enumerates the available color palette options for a component.
13
- * These values can be used to apply specific color styles to components within the
14
- * application.
10
+ * These values can be used to apply specific color styles to components within the application.
15
11
  */
16
12
  export declare enum DaffPaletteEnum {
17
13
  /**
@@ -27,19 +23,29 @@ export declare enum DaffPaletteEnum {
27
23
  */
28
24
  Tertiary = "tertiary",
29
25
  /**
30
- * Black. It's dark.
26
+ * A light color that does not change based on the defined theme.
31
27
  */
32
- Black = "black",
28
+ Light = "light",
33
29
  /**
34
- * White. It's bright.
30
+ * A dark color that does not change based on the defined theme.
35
31
  */
36
- White = "white",
32
+ Dark = "dark",
37
33
  /**
38
- * The default color for your theme.
34
+ * A color that matches the defined theme.
39
35
  */
40
36
  Theme = "theme",
41
37
  /**
42
- * A color that constrats against your defined theme.
38
+ * A color that contrasts against the defined theme.
39
+ */
40
+ ThemeContrast = "theme-contrast",
41
+ /**
42
+ * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
43
+ * Black. It's dark.
44
+ */
45
+ Black = "black",
46
+ /**
47
+ * @deprecated Deprecated in version 0.82.0. Will be removed in version 0.85.0.
48
+ * White. It's bright.
43
49
  */
44
- ThemeContrast = "theme-contrast"
50
+ White = "white"
45
51
  }
@@ -6,18 +6,20 @@ import * as i0 from "@angular/core";
6
6
  * styles by setting CSS classes based on the specified color. This directive is useful
7
7
  * for applying different color palettes to a component in an Angular application.
8
8
  *
9
- * Supported colors: `primary | secondary | tertiary | black | white | theme | theme-contrast`
9
+ * Supported colors: `primary | secondary | tertiary | light | dark | theme | theme-contrast`
10
10
  *
11
11
  * | Color | Class |
12
12
  * | -------- | ----- |
13
13
  * | `primary` | `.daff-primary`|
14
14
  * | `secondary` | `.daff-secondary`|
15
15
  * | `tertiary` | `.daff-tertiary`|
16
- * | `black` | `.daff-black`|
17
- * | `white` | `.daff-white`|
16
+ * | `light` | `daff-light` |
17
+ * | `dark` | `daff-dark` |
18
18
  * | `theme` | `daff-theme`|
19
19
  * | `theme-contrast` | `.daff-theme-contrast`|
20
20
  *
21
+ * `white` and `black` have been deprecated in favor of `light` and `dark`.
22
+ *
21
23
  * @example Implementing it as an attribute directive
22
24
  *
23
25
  * ```html
@@ -39,7 +41,6 @@ import * as i0 from "@angular/core";
39
41
  *
40
42
  * ```ts
41
43
  * @Component({
42
- * standalone: true,
43
44
  * selector: 'custom-component',
44
45
  * template: 'custom-component.html',
45
46
  * hostDirectives: [
@@ -72,10 +73,12 @@ export declare class DaffColorableDirective implements DaffColorable, OnChanges,
72
73
  'daff-primary': boolean;
73
74
  'daff-secondary': boolean;
74
75
  'daff-tertiary': boolean;
75
- 'daff-black': boolean;
76
- 'daff-white': boolean;
76
+ 'daff-light': boolean;
77
+ 'daff-dark': boolean;
77
78
  'daff-theme': boolean;
78
79
  'daff-theme-contrast': boolean;
80
+ 'daff-black': boolean;
81
+ 'daff-white': boolean;
79
82
  };
80
83
  /**
81
84
  * Sets the color on a component.
@@ -4,23 +4,47 @@ import * as i1 from '@daffodil/design/accordion';
4
4
  import { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';
5
5
 
6
6
  class BasicAccordionComponent {
7
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BasicAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: BasicAccordionComponent, isStandalone: true, selector: "basic-accordion", ngImport: i0, template: "<daff-accordion>\n\t<daff-accordion-item [initiallyExpanded]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n", dependencies: [{ kind: "component", type: i1.DaffAccordionComponent, selector: "daff-accordion" }, { kind: "component", type: i1.DaffAccordionItemComponent, selector: "daff-accordion-item", inputs: ["id", "initiallyExpanded"] }, { kind: "directive", type: i1.DaffAccordionItemTitleDirective, selector: "[daffAccordionItemTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: BasicAccordionComponent, isStandalone: true, selector: "basic-accordion", ngImport: i0, template: "<daff-accordion>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n", dependencies: [{ kind: "component", type: i1.DaffAccordionComponent, selector: "daff-accordion" }, { kind: "component", type: i1.DaffAccordionItemComponent, selector: "daff-accordion-item", inputs: ["itemId", "contentId", "initiallyExpanded", "disabled"] }, { kind: "directive", type: i1.DaffAccordionItemTitleDirective, selector: "[daffAccordionItemTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
9
9
  }
10
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BasicAccordionComponent, decorators: [{
10
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: BasicAccordionComponent, decorators: [{
11
11
  type: Component,
12
12
  args: [{ selector: 'basic-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
13
13
  DAFF_ACCORDION_COMPONENTS,
14
+ ], template: "<daff-accordion>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n" }]
15
+ }] });
16
+
17
+ class InitiallyExpandedAccordionComponent {
18
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InitiallyExpandedAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
19
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: InitiallyExpandedAccordionComponent, isStandalone: true, selector: "initially-expanded-accordion", ngImport: i0, template: "<daff-accordion>\n\t<daff-accordion-item [initiallyExpanded]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n", dependencies: [{ kind: "component", type: i1.DaffAccordionComponent, selector: "daff-accordion" }, { kind: "component", type: i1.DaffAccordionItemComponent, selector: "daff-accordion-item", inputs: ["itemId", "contentId", "initiallyExpanded", "disabled"] }, { kind: "directive", type: i1.DaffAccordionItemTitleDirective, selector: "[daffAccordionItemTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
20
+ }
21
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: InitiallyExpandedAccordionComponent, decorators: [{
22
+ type: Component,
23
+ args: [{ selector: 'initially-expanded-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
24
+ DAFF_ACCORDION_COMPONENTS,
14
25
  ], template: "<daff-accordion>\n\t<daff-accordion-item [initiallyExpanded]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n" }]
15
26
  }] });
16
27
 
28
+ class DisabledAccordionComponent {
29
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DisabledAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
30
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DisabledAccordionComponent, isStandalone: true, selector: "disabled-accordion", ngImport: i0, template: "<daff-accordion>\n\t<daff-accordion-item [disabled]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n", dependencies: [{ kind: "component", type: i1.DaffAccordionComponent, selector: "daff-accordion" }, { kind: "component", type: i1.DaffAccordionItemComponent, selector: "daff-accordion-item", inputs: ["itemId", "contentId", "initiallyExpanded", "disabled"] }, { kind: "directive", type: i1.DaffAccordionItemTitleDirective, selector: "[daffAccordionItemTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
31
+ }
32
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DisabledAccordionComponent, decorators: [{
33
+ type: Component,
34
+ args: [{ selector: 'disabled-accordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
35
+ DAFF_ACCORDION_COMPONENTS,
36
+ ], template: "<daff-accordion>\n\t<daff-accordion-item [disabled]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n" }]
37
+ }] });
38
+
17
39
  const ACCORDION_EXAMPLES = [
18
40
  BasicAccordionComponent,
41
+ InitiallyExpandedAccordionComponent,
42
+ DisabledAccordionComponent,
19
43
  ];
20
44
 
21
45
  /**
22
46
  * Generated bundle index. Do not edit.
23
47
  */
24
48
 
25
- export { ACCORDION_EXAMPLES, BasicAccordionComponent };
49
+ export { ACCORDION_EXAMPLES, BasicAccordionComponent, DisabledAccordionComponent, InitiallyExpandedAccordionComponent };
26
50
  //# sourceMappingURL=daffodil-design-accordion-examples.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"daffodil-design-accordion-examples.mjs","sources":["../../../libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.ts","../../../libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html","../../../libs/design/accordion/examples/src/examples.ts","../../../libs/design/accordion/examples/src/daffodil-design-accordion-examples.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\nimport { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'basic-accordion',\n templateUrl: './basic-accordion.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DAFF_ACCORDION_COMPONENTS,\n ],\n})\nexport class BasicAccordionComponent {}\n","<daff-accordion>\n\t<daff-accordion-item [initiallyExpanded]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n","import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';\n\nexport const ACCORDION_EXAMPLES = [\n BasicAccordionComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAgBa,uBAAuB,CAAA;iIAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,2EChBpC,4qCAuBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,mBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,+BAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDPa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBATnC,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAEV,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,yBAAyB;AAC1B,qBAAA,EAAA,QAAA,EAAA,4qCAAA,EAAA;;;AEZU,MAAA,kBAAkB,GAAG;IAChC,uBAAuB;;;ACHzB;;AAEG;;;;"}
1
+ {"version":3,"file":"daffodil-design-accordion-examples.mjs","sources":["../../../libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.ts","../../../libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html","../../../libs/design/accordion/examples/src/initially-expanded-accordion/initially-expanded-accordion.component.ts","../../../libs/design/accordion/examples/src/initially-expanded-accordion/initially-expanded-accordion.component.html","../../../libs/design/accordion/examples/src/disabled-accordion/disabled-accordion.component.ts","../../../libs/design/accordion/examples/src/disabled-accordion/disabled-accordion.component.html","../../../libs/design/accordion/examples/src/examples.ts","../../../libs/design/accordion/examples/src/daffodil-design-accordion-examples.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\nimport { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'basic-accordion',\n templateUrl: './basic-accordion.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DAFF_ACCORDION_COMPONENTS,\n ],\n})\nexport class BasicAccordionComponent {}\n","<daff-accordion>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\nimport { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'initially-expanded-accordion',\n templateUrl: './initially-expanded-accordion.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DAFF_ACCORDION_COMPONENTS,\n ],\n})\nexport class InitiallyExpandedAccordionComponent {}\n","<daff-accordion>\n\t<daff-accordion-item [initiallyExpanded]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n","import {\n ChangeDetectionStrategy,\n Component,\n} from '@angular/core';\n\nimport { DAFF_ACCORDION_COMPONENTS } from '@daffodil/design/accordion';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'disabled-accordion',\n templateUrl: './disabled-accordion.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n DAFF_ACCORDION_COMPONENTS,\n ],\n})\nexport class DisabledAccordionComponent {}\n","<daff-accordion>\n\t<daff-accordion-item [disabled]=\"true\">\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n\t<daff-accordion-item>\n\t\t<div daffAccordionItemTitle>This is the accordion item title</div>\n\t\t<p>\n\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.\n\t\t\t<a href=\"/\">Learn More.</a>\n\t\t</p>\n\t</daff-accordion-item>\n</daff-accordion>\n","import { BasicAccordionComponent } from './basic-accordion/basic-accordion.component';\nimport { DisabledAccordionComponent } from './disabled-accordion/disabled-accordion.component';\nimport { InitiallyExpandedAccordionComponent } from './initially-expanded-accordion/initially-expanded-accordion.component';\n\nexport const ACCORDION_EXAMPLES = [\n BasicAccordionComponent,\n InitiallyExpandedAccordionComponent,\n DisabledAccordionComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;MAgBa,uBAAuB,CAAA;iIAAvB,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,2EChBpC,+oCAuBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,+BAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDPa,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBATnC,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAEV,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,yBAAyB;AAC1B,qBAAA,EAAA,QAAA,EAAA,+oCAAA,EAAA;;;MEEU,mCAAmC,CAAA;iIAAnC,mCAAmC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnC,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mCAAmC,wFChBhD,4qCAuBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,+BAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDPa,mCAAmC,EAAA,UAAA,EAAA,CAAA;kBAT/C,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,8BAA8B,EAEvB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,yBAAyB;AAC1B,qBAAA,EAAA,QAAA,EAAA,4qCAAA,EAAA;;;MEEU,0BAA0B,CAAA;iIAA1B,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA1B,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,0BAA0B,8EChBvC,mqCAuBA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,sBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,0BAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,+BAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDPa,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBATtC,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,oBAAoB,EAEb,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACtC,OAAA,EAAA;wBACP,yBAAyB;AAC1B,qBAAA,EAAA,QAAA,EAAA,mqCAAA,EAAA;;;AEVU,MAAA,kBAAkB,GAAG;IAChC,uBAAuB;IACvB,mCAAmC;IACnC,0BAA0B;;;ACP5B;;AAEG;;;;"}
@@ -3,27 +3,31 @@ import * as i0 from '@angular/core';
3
3
  import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Directive, NgModule } from '@angular/core';
4
4
  import * as i1 from '@daffodil/design';
5
5
  import { DaffArticleEncapsulatedDirective, DaffOpenableDirective } from '@daffodil/design';
6
- import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
7
6
  import { trigger, state, style, transition, animate } from '@angular/animations';
8
7
 
8
+ /**
9
+ * A wrapper for grouping accordion items.
10
+ */
9
11
  class DaffAccordionComponent {
10
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
11
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffAccordionComponent, isStandalone: true, selector: "daff-accordion", hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
13
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffAccordionComponent, isStandalone: true, selector: "daff-accordion", hostDirectives: [{ directive: i1.DaffArticleEncapsulatedDirective }], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
12
14
  }
13
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionComponent, decorators: [{
15
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionComponent, decorators: [{
14
16
  type: Component,
15
17
  args: [{ selector: 'daff-accordion', template: '<ng-content></ng-content>', hostDirectives: [{
16
18
  directive: DaffArticleEncapsulatedDirective,
17
- }], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [":host{display:block}\n"] }]
19
+ }], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
18
20
  }] });
19
21
 
20
22
  const daffAccordionAnimations = {
21
23
  openAccordion: trigger('openAccordion', [
22
24
  state('open', style({
25
+ visibility: 'visible',
23
26
  opacity: '1',
24
27
  height: '*',
25
28
  })),
26
29
  state('void', style({
30
+ visibility: 'hidden',
27
31
  opacity: '0',
28
32
  height: '0',
29
33
  })),
@@ -41,25 +45,34 @@ const getAnimationState = (open) => {
41
45
  };
42
46
 
43
47
  let daffAccordionItemId = 0;
48
+ let daffAccordionItemContentId = 0;
49
+ /**
50
+ * The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked.
51
+ * All `daff-accordion-item`s should be grouped inside the `daff-accordion` component.
52
+ */
44
53
  class DaffAccordionItemComponent {
45
54
  constructor(openDirective) {
46
55
  this.openDirective = openDirective;
47
56
  /**
48
57
  * @docs-private
49
58
  */
50
- this.faChevronDown = faChevronDown;
59
+ this.class = true;
51
60
  /**
52
- * @docs-private
61
+ * The unique id of an accordion item. Defaults to an autogenerated value.
53
62
  */
54
- this.faChevronUp = faChevronUp;
63
+ this.itemId = 'daff-accordion-item' + '-' + ++daffAccordionItemId;
55
64
  /**
56
- * @docs-private
65
+ * The unique id of an accordion item content. Defaults to an autogenerated value.
66
+ */
67
+ this.contentId = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId;
68
+ /**
69
+ * Whether or not the item is initially opened by default.
57
70
  */
58
- this.class = true;
59
- this._daffAccordionItemId = 'daff-accordion-item' + '-' + ++daffAccordionItemId;
60
- this.id = this._daffAccordionItemId;
61
- /** Whether or not the item is initiallyExpanded by default. */
62
71
  this.initiallyExpanded = false;
72
+ /**
73
+ * Disables an accordion item and prevents it from being expanded or collapsed.
74
+ */
75
+ this.disabled = false;
63
76
  this.openDirective.stateless = false;
64
77
  }
65
78
  /**
@@ -69,34 +82,37 @@ class DaffAccordionItemComponent {
69
82
  this.openDirective.open = this.initiallyExpanded ? this.initiallyExpanded : this.openDirective.open;
70
83
  this._animationState = getAnimationState(this.openDirective.open);
71
84
  }
85
+ /**
86
+ * @docs-private
87
+ */
72
88
  get open() {
73
89
  return this.openDirective.open;
74
90
  }
75
91
  /**
76
- * Reveals the contents of the accordion item
92
+ * Reveals the contents of the accordion item.
77
93
  */
78
94
  reveal() {
79
95
  this.openDirective.reveal();
80
96
  }
81
97
  /**
82
- * Hides the contents of the accordion item
98
+ * Hides the contents of the accordion item.
83
99
  */
84
100
  hide() {
85
101
  this.openDirective.hide();
86
102
  }
87
103
  /**
88
- * Toggles the visibility of the contents of the accordion item
104
+ * Toggles the visibility of the contents of the accordion item.
89
105
  */
90
106
  toggle() {
91
107
  this.openDirective.toggle();
92
108
  this._animationState = getAnimationState(this.openDirective.open);
93
109
  }
94
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
95
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.7", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { id: "id", initiallyExpanded: "initiallyExpanded" }, host: { properties: { "class.daff-accordion-item": "this.class" } }, hostDirectives: [{ directive: i1.DaffOpenableDirective, inputs: ["open", "open"], outputs: ["toggled", "toggled"] }], ngImport: i0, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-controls]=\"id\">\n <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div [@openAccordion]=\"_animationState\" [id]=\"id\">\n <div class=\"daff-accordion-item__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;inline-size:100%;margin:0;padding:16px;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:2px;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:8px;height:8px;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item__title{font-size:1rem;font-weight:500;inline-size:100%;margin:0;padding:0 32px 0 0;text-align:start}.daff-accordion-item__content{padding:0 16px 16px}.daff-accordion-item__content>p{margin:0 0 16px}.daff-accordion-item__content>p:last-child{margin:0}\n"], animations: [
110
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
111
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded", disabled: "disabled" }, host: { properties: { "class.daff-accordion-item": "this.class" } }, hostDirectives: [{ directive: i1.DaffOpenableDirective, inputs: ["open", "open"], outputs: ["toggled", "toggled"] }], ngImport: i0, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-controls]=\"contentId\"\n [id]=\"itemId\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled\">\n <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div [@openAccordion]=\"_animationState\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n <div class=\"daff-accordion-item__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item__header[disabled]{cursor:not-allowed;opacity:.7}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item__title{font-size:1rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{padding:0 1rem 1rem}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"], animations: [
96
112
  daffAccordionAnimations.openAccordion,
97
113
  ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
98
114
  }
99
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
115
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
100
116
  type: Component,
101
117
  args: [{ selector: 'daff-accordion-item', hostDirectives: [{
102
118
  directive: DaffOpenableDirective,
@@ -104,16 +120,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
104
120
  outputs: ['toggled'],
105
121
  }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [
106
122
  daffAccordionAnimations.openAccordion,
107
- ], standalone: true, template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-controls]=\"id\">\n <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div [@openAccordion]=\"_animationState\" [id]=\"id\">\n <div class=\"daff-accordion-item__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;inline-size:100%;margin:0;padding:16px;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:2px;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:8px;height:8px;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item__title{font-size:1rem;font-weight:500;inline-size:100%;margin:0;padding:0 32px 0 0;text-align:start}.daff-accordion-item__content{padding:0 16px 16px}.daff-accordion-item__content>p{margin:0 0 16px}.daff-accordion-item__content>p:last-child{margin:0}\n"] }]
123
+ ], template: "<button type=\"button\" class=\"daff-accordion-item__header\"\n (click)=\"toggle()\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-controls]=\"contentId\"\n [id]=\"itemId\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled\">\n <ng-content select=\"[daffAccordionItemTitle]\"></ng-content>\n</button>\n<div [@openAccordion]=\"_animationState\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n <div class=\"daff-accordion-item__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".daff-accordion-item{display:block}.daff-accordion-item__header{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;align-items:center;appearance:none;justify-content:space-between;gap:.5rem;background:none;border:none;inline-size:100%;margin:0;padding:1rem;position:relative}.daff-accordion-item__header:after{content:\"\";position:absolute;top:48%;right:1rem;display:inline-block;border-right:2px solid currentColor;border-bottom:2px solid currentColor;width:.5rem;height:.5rem;transform:translateY(-50%) rotate(45deg);transition:transform .15s}.daff-accordion-item__header[disabled]{cursor:not-allowed;opacity:.7}.daff-accordion-item.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item__title{font-size:1rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{padding:0 1rem 1rem}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"] }]
108
124
  }], ctorParameters: () => [{ type: i1.DaffOpenableDirective }], propDecorators: { class: [{
109
125
  type: HostBinding,
110
126
  args: ['class.daff-accordion-item']
111
- }], id: [{
127
+ }], itemId: [{
128
+ type: Input
129
+ }], contentId: [{
112
130
  type: Input
113
131
  }], initiallyExpanded: [{
114
132
  type: Input
133
+ }], disabled: [{
134
+ type: Input
115
135
  }] } });
116
136
 
137
+ /**
138
+ * Used to provide a high level overview of the content. It should be wrapped by a `<daff-accordion-item>`.
139
+ */
117
140
  class DaffAccordionItemTitleDirective {
118
141
  constructor() {
119
142
  /**
@@ -121,14 +144,13 @@ class DaffAccordionItemTitleDirective {
121
144
  */
122
145
  this.class = true;
123
146
  }
124
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
125
- /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: DaffAccordionItemTitleDirective, isStandalone: true, selector: "[daffAccordionItemTitle]", host: { properties: { "class.daff-accordion-item__title": "this.class" } }, ngImport: i0 }); }
147
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionItemTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
148
+ /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.5", type: DaffAccordionItemTitleDirective, isStandalone: true, selector: "[daffAccordionItemTitle]", host: { properties: { "class.daff-accordion-item__title": "this.class" } }, ngImport: i0 }); }
126
149
  }
127
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionItemTitleDirective, decorators: [{
150
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionItemTitleDirective, decorators: [{
128
151
  type: Directive,
129
152
  args: [{
130
153
  selector: '[daffAccordionItemTitle]',
131
- standalone: true,
132
154
  }]
133
155
  }], propDecorators: { class: [{
134
156
  type: HostBinding,
@@ -139,16 +161,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
139
161
  * @deprecated in favor of {@link DAFF_ACCORDION_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
140
162
  */
141
163
  class DaffAccordionModule {
142
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
143
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule,
164
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
165
+ /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule,
144
166
  DaffAccordionComponent,
145
167
  DaffAccordionItemComponent,
146
168
  DaffAccordionItemTitleDirective], exports: [DaffAccordionComponent,
147
169
  DaffAccordionItemComponent,
148
170
  DaffAccordionItemTitleDirective] }); }
149
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule] }); }
171
+ /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionModule, imports: [CommonModule] }); }
150
172
  }
151
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: DaffAccordionModule, decorators: [{
173
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: DaffAccordionModule, decorators: [{
152
174
  type: NgModule,
153
175
  args: [{
154
176
  imports: [
@@ -165,6 +187,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
165
187
  }]
166
188
  }] });
167
189
 
190
+ /**
191
+ * @docs-private
192
+ *
193
+ * `DAFF_ACCORDION_COMPONENTS` imports all the available components and directives related to the component.
194
+ */
168
195
  const DAFF_ACCORDION_COMPONENTS = [
169
196
  DaffAccordionComponent,
170
197
  DaffAccordionItemComponent,