@daffodil/design 0.93.1 → 0.94.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 (127) hide show
  1. package/README.md +0 -1
  2. package/accordion/src/accordion-theme.scss +2 -2
  3. package/article/src/article/_stops-article-cascade.scss +5 -1
  4. package/article/src/article-theme.scss +2 -2
  5. package/badge/README.md +85 -0
  6. package/badge/src/badge-theme.scss +197 -0
  7. package/breadcrumb/src/breadcrumb-theme.scss +2 -2
  8. package/button/src/button/basic/button-theme.scss +2 -2
  9. package/button/src/button/flat/flat-theme.scss +2 -2
  10. package/button/src/button/icon/icon-theme.scss +2 -2
  11. package/button/src/button/raised/raised-theme.scss +13 -13
  12. package/button/src/button/stroked/stroked-theme.scss +2 -2
  13. package/button/src/button/underline/underline-theme.scss +2 -2
  14. package/callout/src/callout-theme.scss +12 -2
  15. package/card/src/card/stroked/stroked-theme.scss +14 -22
  16. package/card/src/card-base-theme.scss +4 -4
  17. package/card/src/card-base.scss +13 -16
  18. package/fesm2022/daffodil-design-accordion.mjs +9 -15
  19. package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
  20. package/fesm2022/daffodil-design-article.mjs +2 -2
  21. package/fesm2022/daffodil-design-article.mjs.map +1 -1
  22. package/fesm2022/daffodil-design-badge.mjs +87 -0
  23. package/fesm2022/daffodil-design-badge.mjs.map +1 -0
  24. package/fesm2022/daffodil-design-breadcrumb.mjs +1 -1
  25. package/fesm2022/daffodil-design-breadcrumb.mjs.map +1 -1
  26. package/fesm2022/daffodil-design-button.mjs +1 -1
  27. package/fesm2022/daffodil-design-button.mjs.map +1 -1
  28. package/fesm2022/daffodil-design-callout.mjs +2 -2
  29. package/fesm2022/daffodil-design-card.mjs +9 -11
  30. package/fesm2022/daffodil-design-card.mjs.map +1 -1
  31. package/fesm2022/daffodil-design-form-field.mjs +95 -115
  32. package/fesm2022/daffodil-design-form-field.mjs.map +1 -1
  33. package/fesm2022/daffodil-design-form.mjs +5 -7
  34. package/fesm2022/daffodil-design-form.mjs.map +1 -1
  35. package/fesm2022/daffodil-design-image.mjs +41 -98
  36. package/fesm2022/daffodil-design-image.mjs.map +1 -1
  37. package/fesm2022/daffodil-design-input.mjs +3 -3
  38. package/fesm2022/daffodil-design-input.mjs.map +1 -1
  39. package/fesm2022/daffodil-design-list.mjs +16 -21
  40. package/fesm2022/daffodil-design-list.mjs.map +1 -1
  41. package/fesm2022/daffodil-design-media-gallery.mjs +56 -61
  42. package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
  43. package/fesm2022/daffodil-design-menu.mjs +61 -38
  44. package/fesm2022/daffodil-design-menu.mjs.map +1 -1
  45. package/fesm2022/daffodil-design-native-select.mjs +3 -3
  46. package/fesm2022/daffodil-design-native-select.mjs.map +1 -1
  47. package/fesm2022/daffodil-design-notification.mjs +17 -20
  48. package/fesm2022/daffodil-design-notification.mjs.map +1 -1
  49. package/fesm2022/daffodil-design-paginator.mjs +71 -76
  50. package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
  51. package/fesm2022/daffodil-design-progress-bar.mjs +33 -53
  52. package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
  53. package/fesm2022/daffodil-design-select.mjs +1 -1
  54. package/fesm2022/daffodil-design-select.mjs.map +1 -1
  55. package/fesm2022/daffodil-design-spinner.mjs +17 -16
  56. package/fesm2022/daffodil-design-spinner.mjs.map +1 -1
  57. package/fesm2022/daffodil-design-switch.mjs +20 -29
  58. package/fesm2022/daffodil-design-switch.mjs.map +1 -1
  59. package/fesm2022/daffodil-design-tabs.mjs +86 -88
  60. package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
  61. package/fesm2022/daffodil-design-tag.mjs +14 -17
  62. package/fesm2022/daffodil-design-tag.mjs.map +1 -1
  63. package/fesm2022/daffodil-design-text-snippet.mjs +18 -23
  64. package/fesm2022/daffodil-design-text-snippet.mjs.map +1 -1
  65. package/fesm2022/daffodil-design-textarea.mjs +3 -3
  66. package/fesm2022/daffodil-design-textarea.mjs.map +1 -1
  67. package/fesm2022/daffodil-design-toast.mjs +19 -20
  68. package/fesm2022/daffodil-design-toast.mjs.map +1 -1
  69. package/fesm2022/daffodil-design.mjs +95 -69
  70. package/fesm2022/daffodil-design.mjs.map +1 -1
  71. package/form/src/hint/hint-theme.scss +2 -2
  72. package/form-field/src/form-field-theme.scss +2 -2
  73. package/hero/src/hero-theme.scss +12 -2
  74. package/list/README.md +10 -0
  75. package/list/src/list-theme.scss +2 -2
  76. package/media-gallery/README.md +0 -5
  77. package/media-gallery/src/media-gallery-theme.scss +2 -2
  78. package/menu/README.md +5 -0
  79. package/menu/src/menu-theme.scss +4 -4
  80. package/notification/src/notification-theme.scss +2 -2
  81. package/package.json +1 -1
  82. package/paginator/src/paginator-theme.scss +2 -2
  83. package/progress-bar/README.md +1 -1
  84. package/progress-bar/src/progress-bar-theme.scss +2 -2
  85. package/scss/state/skeleton/_mixins.scss +2 -2
  86. package/scss/theme/default.scss +15 -0
  87. package/scss/theme.scss +2 -8
  88. package/scss/theming/_configure-palette.scss +5 -1
  89. package/scss/theming/_get-theme-mode.scss +1 -1
  90. package/scss/theming/_index.scss +2 -3
  91. package/scss/theming/_light-dark.scss +37 -12
  92. package/scss/theming/color-shift/_color-shift.scss +56 -0
  93. package/scss/theming/color-shift/_color-shift.spec.scss +107 -0
  94. package/scss/theming/color-shift/_index.scss +1 -0
  95. package/scss/theming/{_daff-theme.scss → default/_daff-theme.scss} +4 -4
  96. package/scss/theming/default/_index.scss +1 -0
  97. package/select/src/select-theme.scss +5 -3
  98. package/switch/src/switch-theme.scss +2 -2
  99. package/tabs/src/tabs-theme.scss +2 -2
  100. package/tag/src/tag-theme.scss +2 -2
  101. package/toast/src/toast-theme.scss +2 -2
  102. package/tree/src/tree-theme.scss +2 -2
  103. package/types/daffodil-design-accordion.d.ts +4 -4
  104. package/types/daffodil-design-badge.d.ts +63 -0
  105. package/types/daffodil-design-card.d.ts +2 -2
  106. package/types/daffodil-design-form-field.d.ts +34 -31
  107. package/types/daffodil-design-form.d.ts +2 -2
  108. package/types/daffodil-design-image.d.ts +15 -28
  109. package/types/daffodil-design-list.d.ts +3 -3
  110. package/types/daffodil-design-media-gallery.d.ts +31 -20
  111. package/types/daffodil-design-menu.d.ts +51 -20
  112. package/types/daffodil-design-notification.d.ts +5 -6
  113. package/types/daffodil-design-paginator.d.ts +20 -25
  114. package/types/daffodil-design-progress-bar.d.ts +16 -21
  115. package/types/daffodil-design-spinner.d.ts +2 -2
  116. package/types/daffodil-design-switch.d.ts +7 -8
  117. package/types/daffodil-design-tabs.d.ts +29 -29
  118. package/types/daffodil-design-tag.d.ts +5 -7
  119. package/types/daffodil-design-text-snippet.d.ts +9 -9
  120. package/types/daffodil-design.d.ts +53 -38
  121. package/fesm2022/daffodil-design-loading-icon.mjs +0 -67
  122. package/fesm2022/daffodil-design-loading-icon.mjs.map +0 -1
  123. package/loading-icon/README.md +0 -59
  124. package/loading-icon/src/loading-icon-theme.scss +0 -103
  125. package/scss/theming/illuminate/illuminate.scss +0 -149
  126. package/scss/theming/illuminate/illuminate.spec.scss +0 -15
  127. package/types/daffodil-design-loading-icon.d.ts +0 -31
@@ -1,6 +1,5 @@
1
- import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
2
1
  import * as i0 from '@angular/core';
3
- import { EventEmitter } from '@angular/core';
2
+ import * as _fortawesome_fontawesome_common_types from '@fortawesome/fontawesome-common-types';
4
3
  import * as i1 from '@daffodil/design';
5
4
  import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffDisableable, DaffPrefixDirective, DaffStatus, DaffDisableableDirective, DaffStatusableDirective } from '@daffodil/design';
6
5
 
@@ -35,7 +34,7 @@ declare class DaffTagComponent implements DaffDisableable {
35
34
  /**
36
35
  * @docs-private
37
36
  */
38
- _prefix: DaffPrefixDirective;
37
+ _prefix: i0.Signal<DaffPrefixDirective>;
39
38
  /**
40
39
  * @docs-private
41
40
  *
@@ -53,11 +52,11 @@ declare class DaffTagComponent implements DaffDisableable {
53
52
  * Whether the tag can be dismissed by the user.
54
53
  * Displays a close icon if `true`.
55
54
  */
56
- dismissible: boolean;
55
+ dismissible: i0.InputSignalWithTransform<boolean, unknown>;
57
56
  /**
58
57
  * Emits when the tag is closed.
59
58
  */
60
- closeTag: EventEmitter<void>;
59
+ closeTag: i0.OutputEmitterRef<void>;
61
60
  /**
62
61
  * @docs-private
63
62
  *
@@ -66,8 +65,7 @@ declare class DaffTagComponent implements DaffDisableable {
66
65
  onCloseTag(event: Event): void;
67
66
  constructor(size: DaffTagSizableDirective, disabledDirective: DaffDisableableDirective, statusable: DaffStatusableDirective);
68
67
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffTagComponent, never>;
69
- static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "status": { "alias": "status"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
70
- static ngAcceptInputType_dismissible: unknown;
68
+ static ɵcmp: i0.ɵɵComponentDeclaration<DaffTagComponent, "daff-tag", never, { "status": { "alias": "status"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "closeTag": "closeTag"; }, ["_prefix"], ["[daffPrefix]", "*"], true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffTagSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
71
69
  }
72
70
 
73
71
  /**
@@ -1,15 +1,15 @@
1
- import * as i0 from '@angular/core';
2
- import { ElementRef, EventEmitter } from '@angular/core';
1
+ import * as _angular_core from '@angular/core';
2
+ import { ElementRef } from '@angular/core';
3
3
 
4
4
  declare class DaffTextSnippetComponent {
5
5
  /**
6
6
  * Whether or not the component should render a condensed version of the content.
7
7
  */
8
- condensed: boolean;
8
+ condensed: _angular_core.ModelSignal<boolean>;
9
9
  /**
10
10
  * The HTML content to render inside the snippet.
11
11
  */
12
- html: string;
12
+ html: _angular_core.InputSignal<string>;
13
13
  /**
14
14
  * @docs-private
15
15
  */
@@ -17,21 +17,21 @@ declare class DaffTextSnippetComponent {
17
17
  /**
18
18
  * @docs-private
19
19
  */
20
- contentRef: ElementRef;
20
+ contentRef: _angular_core.Signal<ElementRef<any>>;
21
21
  /**
22
22
  * @docs-private
23
23
  */
24
- htmlRef: ElementRef;
24
+ htmlRef: _angular_core.Signal<ElementRef<any>>;
25
25
  /**
26
26
  * An output event that can be used to track the state of the component externally.
27
27
  */
28
- toggle: EventEmitter<boolean>;
28
+ toggled: _angular_core.OutputEmitterRef<boolean>;
29
29
  /**
30
30
  * @docs-private
31
31
  */
32
32
  toggleSnippet(): void;
33
- static ɵfac: i0.ɵɵFactoryDeclaration<DaffTextSnippetComponent, never>;
34
- static ɵcmp: i0.ɵɵComponentDeclaration<DaffTextSnippetComponent, "daff-text-snippet", never, { "condensed": { "alias": "condensed"; "required": false; }; "html": { "alias": "html"; "required": false; }; }, { "toggle": "toggle"; }, never, ["*"], true, never>;
33
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<DaffTextSnippetComponent, never>;
34
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<DaffTextSnippetComponent, "daff-text-snippet", never, { "condensed": { "alias": "condensed"; "required": false; "isSignal": true; }; "html": { "alias": "html"; "required": false; "isSignal": true; }; }, { "condensed": "condensedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
35
35
  }
36
36
 
37
37
  export { DaffTextSnippetComponent };
@@ -826,9 +826,9 @@ declare class DaffDisableableDirective {
826
826
  /**
827
827
  * Whether the component is disabled.
828
828
  */
829
- disabled: boolean;
829
+ disabled: i0.ModelSignal<boolean>;
830
830
  static ɵfac: i0.ɵɵFactoryDeclaration<DaffDisableableDirective, never>;
831
- static ɵdir: i0.ɵɵDirectiveDeclaration<DaffDisableableDirective, "[daffDisableable]", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
831
+ static ɵdir: i0.ɵɵDirectiveDeclaration<DaffDisableableDirective, "[daffDisableable]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; }, never, never, true, never>;
832
832
  }
833
833
 
834
834
  /**
@@ -890,6 +890,21 @@ declare class DaffLoadableDirective {
890
890
  static ɵdir: i0.ɵɵDirectiveDeclaration<DaffLoadableDirective, "[daffLoadable]", never, { "loading": { "alias": "loading"; "required": false; }; }, {}, never, never, true, never>;
891
891
  }
892
892
 
893
+ /**
894
+ * The public shape of an RTI boundary, exposed to descendant RTI targets.
895
+ */
896
+ interface DaffRovingTabIndexBoundary {
897
+ /**
898
+ * The name of the group defined by this boundary.
899
+ */
900
+ readonly effectiveBoundary: Signal<string>;
901
+ }
902
+ /**
903
+ * Allows RTI targets to inject their nearest ancestor boundary without
904
+ * creating a circular import with the boundary directive.
905
+ */
906
+ declare const DAFF_ROVING_TAB_INDEX_BOUNDARY: InjectionToken<DaffRovingTabIndexBoundary>;
907
+
893
908
  declare class DaffRovingTabIndexService {
894
909
  private document;
895
910
  private readonly _hierarchy;
@@ -906,39 +921,6 @@ declare class DaffRovingTabIndexService {
906
921
  static ɵprov: i0.ɵɵInjectableDeclaration<DaffRovingTabIndexService>;
907
922
  }
908
923
 
909
- /**
910
- * Defines the boundary of an RTI group.
911
- */
912
- declare class DaffRovingTabIndexBoundaryDirective {
913
- private groupService;
914
- private focusTrap;
915
- /**
916
- * Don't touch this directly. Use `_uniqueId`.
917
- */
918
- private static _uniqueIdCounter;
919
- /**
920
- * Don't touch this directly. Use `_uniqueId`.
921
- */
922
- private _cachedUniqueId;
923
- private get _uniqueId();
924
- /**
925
- * The name of the group for which that this element will act as boundary.
926
- * Optional, will be autogenerated to a unique name if omitted.
927
- */
928
- readonly rtiBoundary: i0.InputSignal<string>;
929
- /**
930
- * The name of the group defined by this boundary.
931
- */
932
- readonly effectiveBoundary: i0.Signal<string>;
933
- constructor(groupService: DaffRovingTabIndexService, focusTrap: CdkTrapFocus);
934
- /**
935
- * @docs-private
936
- */
937
- enterGroup(evt: Event): void;
938
- static ɵfac: i0.ɵɵFactoryDeclaration<DaffRovingTabIndexBoundaryDirective, never>;
939
- static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRovingTabIndexBoundaryDirective, "[rtiBoundary]", never, { "rtiBoundary": { "alias": "rtiBoundary"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }, { directive: typeof DaffRovingTabIndexDirective; inputs: {}; outputs: {}; }]>;
940
- }
941
-
942
924
  /**
943
925
  * Declares that an element is an RTI target.
944
926
  * Automatically applied to `<a>` and `<button>` elements.
@@ -961,7 +943,7 @@ declare class DaffRovingTabIndexDirective {
961
943
  * @docs-private
962
944
  */
963
945
  readonly tabindex: i0.Signal<0 | -1>;
964
- constructor(service: DaffRovingTabIndexService, parent: DaffRovingTabIndexBoundaryDirective);
946
+ constructor(service: DaffRovingTabIndexService, parent: DaffRovingTabIndexBoundary);
965
947
  /**
966
948
  * @docs-private
967
949
  */
@@ -978,5 +960,38 @@ declare class DaffRovingTabIndexDirective {
978
960
  static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRovingTabIndexDirective, "[rti],a,button", never, { "rti": { "alias": "rti"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
979
961
  }
980
962
 
981
- export { DAFF_PREFIX_SUFFIX_DIRECTIVES, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffColorableDirective, DaffCompactableDirective, DaffDisableableDirective, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffLoadableDirective, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffOrientableDirective, DaffOrientationEnum, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRovingTabIndexBoundaryDirective, DaffRovingTabIndexDirective, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
982
- export type { AnimationStateWithParams, Constructor, DaffColor, DaffColorable, DaffCompactable, DaffDisableable, DaffLazyComponent, DaffOpenable, DaffOrientable, DaffOrientation, DaffPalette, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };
963
+ /**
964
+ * Defines the boundary of an RTI group.
965
+ */
966
+ declare class DaffRovingTabIndexBoundaryDirective implements DaffRovingTabIndexBoundary {
967
+ private groupService;
968
+ private focusTrap;
969
+ /**
970
+ * Don't touch this directly. Use `_uniqueId`.
971
+ */
972
+ private static _uniqueIdCounter;
973
+ /**
974
+ * Don't touch this directly. Use `_uniqueId`.
975
+ */
976
+ private _cachedUniqueId;
977
+ private get _uniqueId();
978
+ /**
979
+ * The name of the group for which that this element will act as boundary.
980
+ * Optional, will be autogenerated to a unique name if omitted.
981
+ */
982
+ readonly rtiBoundary: i0.InputSignal<string>;
983
+ /**
984
+ * The name of the group defined by this boundary.
985
+ */
986
+ readonly effectiveBoundary: i0.Signal<string>;
987
+ constructor(groupService: DaffRovingTabIndexService, focusTrap: CdkTrapFocus);
988
+ /**
989
+ * @docs-private
990
+ */
991
+ enterGroup(evt: Event): void;
992
+ static ɵfac: i0.ɵɵFactoryDeclaration<DaffRovingTabIndexBoundaryDirective, never>;
993
+ static ɵdir: i0.ɵɵDirectiveDeclaration<DaffRovingTabIndexBoundaryDirective, "[rtiBoundary]", never, { "rtiBoundary": { "alias": "rtiBoundary"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.CdkTrapFocus; inputs: {}; outputs: {}; }, { directive: typeof DaffRovingTabIndexDirective; inputs: {}; outputs: {}; }]>;
994
+ }
995
+
996
+ export { DAFF_PREFIX_SUFFIX_DIRECTIVES, DAFF_ROVING_TAB_INDEX_BOUNDARY, DAFF_THEME_INITIALIZER, DaffArticleEncapsulatedDirective, DaffBreakpoints, DaffColorableDirective, DaffCompactableDirective, DaffDisableableDirective, DaffFocusStackService, DaffFormLabelDirective, DaffFormLabelModule, DaffLoadableDirective, DaffManageContainerLayoutDirective, DaffOpenableDirective, DaffOrientableDirective, DaffOrientationEnum, DaffPrefixDirective, DaffPrefixSuffixModule, DaffRovingTabIndexBoundaryDirective, DaffRovingTabIndexDirective, DaffSelectableDirective, DaffSizableDirective, DaffSizableEnum, DaffSkeletonableDirective, DaffStatusEnum, DaffStatusableDirective, DaffStickyTrackerDirective, DaffSuffixDirective, DaffTextAlignableDirective, DaffTextAlignmentEnum, DaffTheme, DaffThemingService, NoopBreakpointObserver, SERVER_SAFE_BREAKPOINT_OBSERVER, daffFocusableElementsSelector };
997
+ export type { AnimationStateWithParams, Constructor, DaffColor, DaffColorable, DaffCompactable, DaffDisableable, DaffLazyComponent, DaffOpenable, DaffOrientable, DaffOrientation, DaffPalette, DaffRovingTabIndexBoundary, DaffSelectable, DaffSizable, DaffSizeAllType, DaffSizeLargeType, DaffSizeMediumType, DaffSizeSmallType, DaffSizeXLargeType, DaffSizeXSmallType, DaffStatus, DaffStatusable, DaffTextAlignable, DaffTextAlignment };
@@ -1,67 +0,0 @@
1
- import { CommonModule } from '@angular/common';
2
- import * as i0 from '@angular/core';
3
- import { HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
4
- import * as i1 from '@daffodil/design';
5
- import { DaffColorableDirective } from '@daffodil/design';
6
-
7
- /**
8
- * @deprecated in favor of `DaffSpinnerComponent`. Deprecated in version 0.91.1. Will be removed in version 0.94.0.
9
- */
10
- class DaffLoadingIconComponent {
11
- constructor() {
12
- /**
13
- * @docs-private
14
- */
15
- this.class = true;
16
- }
17
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadingIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
18
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: DaffLoadingIconComponent, isStandalone: true, selector: "daff-loading-icon", host: { properties: { "class.daff-loading-icon": "this.class" } }, hostDirectives: [{ directive: i1.DaffColorableDirective, inputs: ["color", "color"] }], ngImport: i0, template: "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n <circle cx=\"50%\" cy=\"50%\" r=\"46\" class=\"daff-loading-icon__bg\"></circle>\n <circle cx=\"50%\" cy=\"50%\" r=\"46\" class=\"daff-loading-icon__loader\"></circle>\n</svg>", styles: [":host{display:flex;width:100%;max-width:4rem}.daff-loading-icon__loader{animation:circle-rotation linear;animation-duration:1s;animation-iteration-count:infinite;fill:transparent;stroke-dasharray:57.8053048261 400;stroke-linecap:round;stroke-width:.25rem;transform-origin:center}.daff-loading-icon__bg{fill:transparent;stroke-linecap:round;stroke-width:.25rem}@keyframes circle-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
19
- }
20
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadingIconComponent, decorators: [{
21
- type: Component,
22
- args: [{ selector: 'daff-loading-icon', hostDirectives: [
23
- {
24
- directive: DaffColorableDirective,
25
- inputs: ['color'],
26
- },
27
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n <circle cx=\"50%\" cy=\"50%\" r=\"46\" class=\"daff-loading-icon__bg\"></circle>\n <circle cx=\"50%\" cy=\"50%\" r=\"46\" class=\"daff-loading-icon__loader\"></circle>\n</svg>", styles: [":host{display:flex;width:100%;max-width:4rem}.daff-loading-icon__loader{animation:circle-rotation linear;animation-duration:1s;animation-iteration-count:infinite;fill:transparent;stroke-dasharray:57.8053048261 400;stroke-linecap:round;stroke-width:.25rem;transform-origin:center}.daff-loading-icon__bg{fill:transparent;stroke-linecap:round;stroke-width:.25rem}@keyframes circle-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
28
- }], propDecorators: { class: [{
29
- type: HostBinding,
30
- args: ['class.daff-loading-icon']
31
- }] } });
32
-
33
- /**
34
- * @deprecated in favor of {@link DAFF_LOADING_ICON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
35
- */
36
- class DaffLoadingIconModule {
37
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadingIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
38
- /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadingIconModule, imports: [CommonModule,
39
- DaffLoadingIconComponent], exports: [DaffLoadingIconComponent] }); }
40
- /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadingIconModule, imports: [CommonModule] }); }
41
- }
42
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DaffLoadingIconModule, decorators: [{
43
- type: NgModule,
44
- args: [{
45
- imports: [
46
- CommonModule,
47
- DaffLoadingIconComponent,
48
- ],
49
- exports: [
50
- DaffLoadingIconComponent,
51
- ],
52
- }]
53
- }] });
54
-
55
- /**
56
- * @docs-private
57
- */
58
- const DAFF_LOADING_ICON_COMPONENTS = [
59
- DaffLoadingIconComponent,
60
- ];
61
-
62
- /**
63
- * Generated bundle index. Do not edit.
64
- */
65
-
66
- export { DAFF_LOADING_ICON_COMPONENTS, DaffLoadingIconComponent, DaffLoadingIconModule };
67
- //# sourceMappingURL=daffodil-design-loading-icon.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"daffodil-design-loading-icon.mjs","sources":["../../../libs/design/loading-icon/src/loading-icon/loading-icon.component.ts","../../../libs/design/loading-icon/src/loading-icon/loading-icon.component.html","../../../libs/design/loading-icon/src/loading-icon.module.ts","../../../libs/design/loading-icon/src/loading-icon.ts","../../../libs/design/loading-icon/src/daffodil-design-loading-icon.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n HostBinding,\n} from '@angular/core';\n\nimport { DaffColorableDirective } from '@daffodil/design';\n\n/**\n * @deprecated in favor of `DaffSpinnerComponent`. Deprecated in version 0.91.1. Will be removed in version 0.94.0.\n */\n@Component({\n selector: 'daff-loading-icon',\n templateUrl: './loading-icon.component.html',\n styleUrls: ['./loading-icon.component.scss'],\n hostDirectives: [\n {\n directive: DaffColorableDirective,\n inputs: ['color'],\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DaffLoadingIconComponent {\n /**\n * @docs-private\n */\n @HostBinding('class.daff-loading-icon') class = true;\n}\n","<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 100 100\">\n <circle cx=\"50%\" cy=\"50%\" r=\"46\" class=\"daff-loading-icon__bg\"></circle>\n <circle cx=\"50%\" cy=\"50%\" r=\"46\" class=\"daff-loading-icon__loader\"></circle>\n</svg>","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';\n\n/**\n * @deprecated in favor of {@link DAFF_LOADING_ICON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.\n */\n@NgModule({\n imports: [\n CommonModule,\n DaffLoadingIconComponent,\n ],\n exports: [\n DaffLoadingIconComponent,\n ],\n})\nexport class DaffLoadingIconModule { }\n","import { DaffLoadingIconComponent } from './loading-icon/loading-icon.component';\n\n/**\n * @docs-private\n */\nexport const DAFF_LOADING_ICON_COMPONENTS = <const> [\n DaffLoadingIconComponent,\n];\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAQA;;AAEG;MAaU,wBAAwB,CAAA;AAZrC,IAAA,WAAA,GAAA;AAaE;;AAEG;QACqC,IAAA,CAAA,KAAK,GAAG,IAAI;AACrD,IAAA;iIALY,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAxB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,wOCvBrC,6QAGM,EAAA,MAAA,EAAA,CAAA,2bAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FDoBO,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAZpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,EAAA,cAAA,EAGb;AACd,wBAAA;AACE,4BAAA,SAAS,EAAE,sBAAsB;4BACjC,MAAM,EAAE,CAAC,OAAO,CAAC;AAClB,yBAAA;qBACF,EAAA,eAAA,EACgB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,6QAAA,EAAA,MAAA,EAAA,CAAA,2bAAA,CAAA,EAAA;;sBAM9C,WAAW;uBAAC,yBAAyB;;;AEtBxC;;AAEG;MAUU,qBAAqB,CAAA;iIAArB,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAArB,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAP9B,YAAY;AACZ,YAAA,wBAAwB,aAGxB,wBAAwB,CAAA,EAAA,CAAA,CAAA;AAGf,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,YAP9B,YAAY,CAAA,EAAA,CAAA,CAAA;;2FAOH,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBATjC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,YAAY;wBACZ,wBAAwB;AACzB,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,wBAAwB;AACzB,qBAAA;AACF,iBAAA;;;ACdD;;AAEG;AACI,MAAM,4BAA4B,GAAW;IAClD,wBAAwB;;;ACN1B;;AAEG;;;;"}
@@ -1,59 +0,0 @@
1
- # Loading Icon
2
- Loading icons are used as an indicator of an event in progress.
3
-
4
- ## Overview
5
- Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](/libs/design/progress-bar/README.md) component instead.
6
-
7
- ## Usage
8
-
9
- ### Within a standalone component
10
- To use loading icon in a standalone component, import `DAFF_LOADING_ICON_COMPONENTS` directly into your custom component:
11
-
12
- ```ts
13
- import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
14
-
15
- @Component({
16
- selector: 'custom-component',
17
- templateUrl: './custom-component.component.html',
18
- imports: [
19
- DAFF_LOADING_ICON_COMPONENTS,
20
- ],
21
- })
22
- export class CustomComponent {}
23
- ```
24
-
25
- ### Within a module (deprecated)
26
- To use loading icon in a module, import `DaffLoadingIconModule` into your custom module:
27
-
28
- ```ts
29
- import { NgModule } from '@angular/core';
30
- import { DaffLoadingIconModule } from '@daffodil/design/loading-icon';
31
- import { CustomComponent } from './custom.component';
32
-
33
- @NgModule({
34
- declarations: [
35
- CustomComponent,
36
- ],
37
- exports: [
38
- CustomComponent,
39
- ],
40
- imports: [
41
- DaffLoadingIconModule,
42
- ],
43
- })
44
- export class CustomComponentModule { }
45
- ```
46
-
47
- > This method is deprecated. It's recommended to update all custom components to standalone.
48
-
49
- ## Colors
50
- Use the `color` property to change the color of a loading icon. The default color is gray.
51
-
52
- > `theme` and `white` should be used on a darker background in order to have sufficient contrast.
53
-
54
- <daff-docs-example-viewer example="loading-icon-color"></daff-docs-example-viewer>
55
-
56
- ## Accessibility
57
- Loading icons should be given meaningful labels by using `aria-label` or `aria-labelledby`.
58
-
59
- If a loading icon is used to indicate a process in progress, using [aria-live](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-live) and [aria-busy](https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-busy") should be strongly considered.
@@ -1,103 +0,0 @@
1
- @use '../../scss/theming' as *;
2
-
3
- @mixin daff-loading-icon-light-variant($loader-color) {
4
- .daff-loading-icon__loader {
5
- stroke: $loader-color;
6
- }
7
-
8
- .daff-loading-icon__bg {
9
- stroke: rgba($loader-color, 0.1);
10
- }
11
- }
12
-
13
- @mixin daff-loading-icon-dark-variant($loader-color) {
14
- .daff-loading-icon__loader {
15
- stroke: $loader-color;
16
- }
17
-
18
- .daff-loading-icon__bg {
19
- stroke: rgba($loader-color, 0.3);
20
- }
21
- }
22
-
23
- @mixin daff-loading-icon-theme($theme) {
24
- $primary: daff-get-palette($theme, primary);
25
- $secondary: daff-get-palette($theme, secondary);
26
- $tertiary: daff-get-palette($theme, tertiary);
27
- $base: daff-get-base-color($theme, base);
28
- $base-contrast: daff-get-base-color($theme, base-contrast);
29
- $white: daff-get-base-color($theme, 'white');
30
- $black: daff-get-base-color($theme, 'black');
31
- $neutral: daff-get-palette($theme, neutral);
32
- $mode: daff-get-theme-mode($theme);
33
-
34
- .daff-loading-icon {
35
- @include light($mode) {
36
- @include daff-loading-icon-light-variant(
37
- daff-color($neutral, 60)
38
- );
39
-
40
- &.daff-primary {
41
- @include daff-loading-icon-light-variant(daff-color($primary));
42
- }
43
-
44
- &.daff-secondary {
45
- @include daff-loading-icon-light-variant(
46
- daff-color($secondary)
47
- );
48
- }
49
-
50
- &.daff-tertiary {
51
- @include daff-loading-icon-light-variant(daff-color($tertiary));
52
- }
53
-
54
- &.daff-theme {
55
- @include daff-loading-icon-light-variant($base);
56
- }
57
-
58
- &.daff-theme-contrast {
59
- @include daff-loading-icon-light-variant($base-contrast);
60
- }
61
-
62
- &.daff-black {
63
- @include daff-loading-icon-light-variant($black);
64
- }
65
-
66
- &.daff-white {
67
- @include daff-loading-icon-light-variant($white);
68
- }
69
- }
70
-
71
- @include dark($mode) {
72
- @include daff-loading-icon-dark-variant(daff-color($neutral, 40));
73
-
74
- &.daff-primary {
75
- @include daff-loading-icon-dark-variant(daff-color($primary));
76
- }
77
-
78
- &.daff-secondary {
79
- @include daff-loading-icon-dark-variant(daff-color($secondary));
80
- }
81
-
82
- &.daff-tertiary {
83
- @include daff-loading-icon-dark-variant(daff-color($tertiary));
84
- }
85
-
86
- &.daff-theme {
87
- @include daff-loading-icon-dark-variant($base);
88
- }
89
-
90
- &.daff-theme-contrast {
91
- @include daff-loading-icon-dark-variant($base-contrast);
92
- }
93
-
94
- &.daff-black {
95
- @include daff-loading-icon-dark-variant($black);
96
- }
97
-
98
- &.daff-white {
99
- @include daff-loading-icon-dark-variant($white);
100
- }
101
- }
102
- }
103
- }
@@ -1,149 +0,0 @@
1
- @use 'sass:list';
2
- @use 'sass:map';
3
- @use 'sass:math';
4
- @use 'sass:meta';
5
- @use '../contrast/luminance/luminance';
6
-
7
- /// @deprecated Deprecated in version 0.87.0. Will be removed in version 0.90.0.
8
- ///
9
- /// Take a numeric map and sort it.
10
- ///
11
- /// https://gist.github.com/Jakobud/a0ac11e80a1de453cd86f0d3fc0a1410
12
- /// Credit to: https://gist.github.com/iamandrewluca
13
- ///
14
- @function _daff-illuminate-sort($map) {
15
- // Transform map to zipped list
16
- $keys: ();
17
- $values: ();
18
-
19
- @each $key, $val in $map {
20
- $keys: list.append($keys, $key);
21
- $values: list.append($values, $val);
22
- }
23
-
24
- $list: list.zip($keys, $values);
25
-
26
- $sorted-map: ();
27
-
28
- @while list.length($list) > 0 {
29
- // Find smallest pair
30
- $smallest-pair: list.nth($list, 1);
31
-
32
- @each $pair in $list {
33
- $value: list.nth($pair, 2);
34
- $smallest-value: list.nth($smallest-pair, 2);
35
-
36
- @if $value < $smallest-value {
37
- $smallest-pair: $pair;
38
- }
39
- }
40
-
41
- // Add smallest pair to sorted map
42
- $key: list.nth($smallest-pair, 1);
43
- $value: list.nth($smallest-pair, 2);
44
- $sorted-map: map.merge(
45
- $sorted-map,
46
- (
47
- $key: $value
48
- )
49
- );
50
-
51
- // Remove from list smallest pair
52
- $smallest-pair-index: list.index($list, $smallest-pair);
53
- $new-list: ();
54
-
55
- @for $i from 1 through list.length($list) {
56
- @if $i != $smallest-pair-index {
57
- $new-list: list.append($new-list, list.nth($list, $i), 'space');
58
- }
59
- }
60
-
61
- $list: $new-list;
62
- }
63
-
64
- @return $sorted-map;
65
- }
66
-
67
- // Given a map of key, luminance pairs, find the key
68
- // of the value that is "nth" away from zero.
69
- //
70
- // @param $map: a map of key, luminance pairs,
71
- // @param $nth: nth steps away from zero
72
- @function _daff-illuminate-get-key($map, $nth: 1) {
73
- //Cap off "nth" to prevent going out-of-bounds.
74
- @if ($nth > list.length($map)) {
75
- $nth: list.length(map);
76
- }
77
-
78
- $map: _daff-illuminate-sort($map);
79
- @return list.nth(list.nth($map, $nth), 1);
80
- }
81
-
82
- // Takes a $color and palette and returns the color in
83
- // the palette which would "illuminate" against that color.
84
- //
85
- // @usage
86
- // ```
87
- // daff-illuminate($palette);
88
- // ```
89
- //
90
- @function daff-illuminate($color, $palette, $nth: 1) {
91
- $luminance-map: ();
92
-
93
- //Validate
94
- @each $key, $palette-color in $palette {
95
- @if (meta.type-of($key) == 'string') {
96
- $palette: map.remove($palette, $key);
97
- }
98
- }
99
-
100
- //Transform into usable values
101
- @each $key, $palette-color in $palette {
102
- $luminance-map: map.merge(
103
- $luminance-map,
104
- (
105
- $key: (
106
- luminance.daff-luminance($palette-color) - luminance.daff-luminance($color)
107
- )
108
- )
109
- );
110
- }
111
-
112
-
113
- //Calculate which color to get
114
- $brighter-colors: ();
115
- $darker-colors: ();
116
-
117
- @each $key, $luminance in $luminance-map {
118
- @if ($luminance > 0) {
119
- $brighter-colors: map.merge(
120
- $brighter-colors,
121
- (
122
- $key: $luminance
123
- )
124
- );
125
- }
126
-
127
- @if ($luminance < 0) {
128
- $darker-colors: map.merge(
129
- $darker-colors,
130
- (
131
- $key: math.abs($luminance)
132
- )
133
- );
134
- }
135
- }
136
-
137
- $key: null;
138
-
139
- @if (luminance.daff-luminance($color) >= 0.5) {
140
- //If the color is bright
141
- $key: _daff-illuminate-get-key($darker-colors, $nth);
142
- }
143
- @else {
144
- //If the color is dark
145
- $key: _daff-illuminate-get-key($brighter-colors, $nth);
146
- }
147
-
148
- @return map.get($palette, $key);
149
- }
@@ -1,15 +0,0 @@
1
- @use 'true' as *;
2
-
3
- @include describe('illuminate') {
4
- //stylelint-disable
5
- @include it('should return a lighter color if the color is dark') {
6
-
7
- }
8
- @include it('should return a darker color if the color is light') {
9
-
10
- }
11
- @include it('should return the expected color for given scenarios') {
12
-
13
- }
14
- //stylelint-enable
15
- }
@@ -1,31 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import * as i1$1 from '@angular/common';
3
- import * as i1 from '@daffodil/design';
4
-
5
- /**
6
- * @deprecated in favor of `DaffSpinnerComponent`. Deprecated in version 0.91.1. Will be removed in version 0.94.0.
7
- */
8
- declare class DaffLoadingIconComponent {
9
- /**
10
- * @docs-private
11
- */
12
- class: boolean;
13
- static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconComponent, never>;
14
- static ɵcmp: i0.ɵɵComponentDeclaration<DaffLoadingIconComponent, "daff-loading-icon", never, {}, {}, never, never, true, [{ directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
15
- }
16
-
17
- /**
18
- * @deprecated in favor of {@link DAFF_LOADING_ICON_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
19
- */
20
- declare class DaffLoadingIconModule {
21
- static ɵfac: i0.ɵɵFactoryDeclaration<DaffLoadingIconModule, never>;
22
- static ɵmod: i0.ɵɵNgModuleDeclaration<DaffLoadingIconModule, never, [typeof i1$1.CommonModule, typeof DaffLoadingIconComponent], [typeof DaffLoadingIconComponent]>;
23
- static ɵinj: i0.ɵɵInjectorDeclaration<DaffLoadingIconModule>;
24
- }
25
-
26
- /**
27
- * @docs-private
28
- */
29
- declare const DAFF_LOADING_ICON_COMPONENTS: readonly [typeof DaffLoadingIconComponent];
30
-
31
- export { DAFF_LOADING_ICON_COMPONENTS, DaffLoadingIconComponent, DaffLoadingIconModule };