@daffodil/design 0.90.0 → 0.91.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/index.d.ts +8 -5
- package/article/README.md +1 -1
- package/article/index.d.ts +20 -0
- package/article/src/article-theme.scss +10 -0
- package/button/index.d.ts +4 -4
- package/button/src/button/button-base.scss +3 -3
- package/button/src/button/raised/raised-theme.scss +2 -2
- package/card/README.md +0 -8
- package/card/index.d.ts +7 -41
- package/card/src/card-base-theme.scss +2 -5
- package/card/src/card-base.scss +2 -2
- package/checkbox/README.md +0 -0
- package/checkbox/index.d.ts +177 -0
- package/fesm2022/daffodil-design-accordion.mjs +23 -14
- package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
- package/fesm2022/daffodil-design-article.mjs +129 -5
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +24 -20
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-card.mjs +16 -63
- package/fesm2022/daffodil-design-card.mjs.map +1 -1
- package/fesm2022/daffodil-design-checkbox.mjs +317 -0
- package/fesm2022/daffodil-design-checkbox.mjs.map +1 -0
- package/fesm2022/daffodil-design-form-field.mjs +35 -65
- package/fesm2022/daffodil-design-form-field.mjs.map +1 -1
- package/fesm2022/daffodil-design-form.mjs +62 -0
- package/fesm2022/daffodil-design-form.mjs.map +1 -0
- package/fesm2022/daffodil-design-image.mjs +12 -4
- package/fesm2022/daffodil-design-image.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +55 -56
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +14 -50
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-paginator.mjs +6 -11
- package/fesm2022/daffodil-design-paginator.mjs.map +1 -1
- package/fesm2022/daffodil-design-quantity-field.mjs +3 -5
- package/fesm2022/daffodil-design-quantity-field.mjs.map +1 -1
- package/fesm2022/daffodil-design-radio.mjs +13 -42
- package/fesm2022/daffodil-design-radio.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +6 -36
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch.mjs +48 -105
- package/fesm2022/daffodil-design-switch.mjs.map +1 -1
- package/fesm2022/daffodil-design-tabs.mjs +22 -14
- package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast.mjs +56 -55
- package/fesm2022/daffodil-design-toast.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree.mjs +4 -13
- package/fesm2022/daffodil-design-tree.mjs.map +1 -1
- package/fesm2022/daffodil-design.mjs +250 -461
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/form/README.md +75 -0
- package/form/index.d.ts +27 -0
- package/form-field/README.md +49 -39
- package/form-field/index.d.ts +56 -36
- package/image/README.md +27 -19
- package/image/index.d.ts +6 -1
- package/index.d.ts +180 -259
- package/input/README.md +32 -12
- package/modal/README.md +106 -16
- package/modal/index.d.ts +50 -21
- package/native-select/README.md +52 -15
- package/notification/index.d.ts +7 -38
- package/package.json +1 -1
- package/paginator/index.d.ts +1 -7
- package/radio/index.d.ts +0 -16
- package/scss/layout/_breakpoint.scss +1 -1
- package/scss/theme.scss +2 -4
- package/scss/theming/_color-palettes.scss +21 -7
- package/scss/theming/_configure-theme.scss +11 -10
- package/scss/theming/_daff-theme.scss +5 -14
- package/scss/theming/_get-base-color.scss +2 -2
- package/scss/theming/_get-palette.scss +2 -2
- package/scss/theming/_get-theme-mode.scss +3 -3
- package/scss/theming/_index.scss +2 -1
- package/scss/theming/contrast/max-contrast/max-contrast.scss +3 -3
- package/scss/theming/contrast/text-contrast/text-contrast.scss +22 -16
- package/scss/theming/contrast/text-contrast/text-contrast.spec.scss +57 -0
- package/scss/theming/create-theme/_create-theme.scss +330 -0
- package/scss/theming/create-theme/_create-theme.spec.scss +122 -0
- package/scss/theming/create-theme/_index.scss +1 -0
- package/scss/theming/get-font-colors/_get-font-colors.scss +36 -0
- package/scss/theming/get-font-colors/_get-font-colors.spec.scss +72 -0
- package/scss/typography/mixins/_font-weight.scss +8 -14
- package/select/README.md +107 -4
- package/sidebar/README.md +0 -8
- package/sidebar/index.d.ts +3 -15
- package/switch/README.md +19 -27
- package/switch/index.d.ts +18 -48
- package/switch/src/switch-theme.scss +26 -18
- package/tabs/index.d.ts +7 -4
- package/tag/src/tag-theme.scss +11 -9
- package/textarea/README.md +35 -5
- package/tree/index.d.ts +0 -6
- package/tree/src/tree-theme.scss +0 -4
- package/accordion/examples/index.d.ts +0 -20
- package/article/examples/index.d.ts +0 -50
- package/breadcrumb/examples/index.d.ts +0 -10
- package/button/examples/index.d.ts +0 -67
- package/callout/examples/index.d.ts +0 -41
- package/card/examples/index.d.ts +0 -62
- package/card/src/card/raised/raised-theme.scss +0 -28
- package/checkbox/examples/index.d.ts +0 -32
- package/container/examples/index.d.ts +0 -16
- package/fesm2022/daffodil-design-accordion-examples.mjs +0 -50
- package/fesm2022/daffodil-design-accordion-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-article-examples.mjs +0 -134
- package/fesm2022/daffodil-design-article-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs +0 -46
- package/fesm2022/daffodil-design-breadcrumb-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-button-examples.mjs +0 -178
- package/fesm2022/daffodil-design-button-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-callout-examples.mjs +0 -116
- package/fesm2022/daffodil-design-callout-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-card-examples.mjs +0 -168
- package/fesm2022/daffodil-design-card-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-checkbox-examples.mjs +0 -76
- package/fesm2022/daffodil-design-checkbox-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-container-examples.mjs +0 -41
- package/fesm2022/daffodil-design-container-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-form-field-examples.mjs +0 -96
- package/fesm2022/daffodil-design-form-field-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-hero-examples.mjs +0 -121
- package/fesm2022/daffodil-design-hero-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-image-examples.mjs +0 -58
- package/fesm2022/daffodil-design-image-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-input-examples.mjs +0 -108
- package/fesm2022/daffodil-design-input-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-list-examples.mjs +0 -77
- package/fesm2022/daffodil-design-list-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-loading-icon-examples.mjs +0 -44
- package/fesm2022/daffodil-design-loading-icon-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-media-gallery-examples.mjs +0 -104
- package/fesm2022/daffodil-design-media-gallery-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-menu-examples.mjs +0 -50
- package/fesm2022/daffodil-design-menu-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-modal-examples.mjs +0 -51
- package/fesm2022/daffodil-design-modal-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-native-select-examples.mjs +0 -71
- package/fesm2022/daffodil-design-native-select-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-navbar-examples.mjs +0 -88
- package/fesm2022/daffodil-design-navbar-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +0 -102
- package/fesm2022/daffodil-design-notification-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-paginator-examples.mjs +0 -59
- package/fesm2022/daffodil-design-paginator-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-progress-bar-examples.mjs +0 -57
- package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-quantity-field-examples.mjs +0 -85
- package/fesm2022/daffodil-design-quantity-field-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-radio-examples.mjs +0 -34
- package/fesm2022/daffodil-design-radio-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-select-examples.mjs +0 -117
- package/fesm2022/daffodil-design-select-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-sidebar-examples.mjs +0 -109
- package/fesm2022/daffodil-design-sidebar-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-sticky-examples.mjs +0 -25
- package/fesm2022/daffodil-design-sticky-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-switch-examples.mjs +0 -110
- package/fesm2022/daffodil-design-switch-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-tabs-examples.mjs +0 -115
- package/fesm2022/daffodil-design-tabs-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-tag-examples.mjs +0 -125
- package/fesm2022/daffodil-design-tag-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-text-snippet-examples.mjs +0 -25
- package/fesm2022/daffodil-design-text-snippet-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-textarea-examples.mjs +0 -66
- package/fesm2022/daffodil-design-textarea-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-toast-examples.mjs +0 -147
- package/fesm2022/daffodil-design-toast-examples.mjs.map +0 -1
- package/fesm2022/daffodil-design-tree-examples.mjs +0 -104
- package/fesm2022/daffodil-design-tree-examples.mjs.map +0 -1
- package/form-field/examples/index.d.ts +0 -18
- package/hero/examples/index.d.ts +0 -45
- package/image/examples/index.d.ts +0 -10
- package/input/examples/index.d.ts +0 -10
- package/list/examples/index.d.ts +0 -29
- package/loading-icon/examples/index.d.ts +0 -16
- package/media-gallery/examples/index.d.ts +0 -38
- package/menu/examples/index.d.ts +0 -20
- package/modal/examples/index.d.ts +0 -15
- package/native-select/examples/index.d.ts +0 -10
- package/navbar/examples/index.d.ts +0 -31
- package/notification/examples/index.d.ts +0 -12
- package/paginator/examples/index.d.ts +0 -26
- package/progress-bar/examples/index.d.ts +0 -10
- package/quantity-field/examples/index.d.ts +0 -30
- package/radio/examples/index.d.ts +0 -13
- package/select/examples/index.d.ts +0 -28
- package/sidebar/examples/index.d.ts +0 -10
- package/sticky/examples/index.d.ts +0 -10
- package/switch/examples/index.d.ts +0 -46
- package/tabs/examples/index.d.ts +0 -12
- package/tag/examples/index.d.ts +0 -50
- package/text-snippet/examples/index.d.ts +0 -10
- package/textarea/examples/index.d.ts +0 -10
- package/toast/examples/index.d.ts +0 -56
- package/tree/examples/index.d.ts +0 -18
- /package/{form-field → form}/src/error-message/error-message-theme.scss +0 -0
- /package/{form-field → form}/src/hint/hint-theme.scss +0 -0
package/accordion/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { OnInit } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import * as i1 from '@daffodil/design';
|
|
5
|
-
import { DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
|
|
5
|
+
import { DaffOpenable, DaffOpenableDirective, DaffDisableableDirective } from '@daffodil/design';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Groups accordion items.
|
|
@@ -39,6 +39,7 @@ declare class DaffAccordionComponent {
|
|
|
39
39
|
*/
|
|
40
40
|
declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
|
|
41
41
|
private openDirective;
|
|
42
|
+
private disabledDirective;
|
|
42
43
|
/**
|
|
43
44
|
* The unique id of an accordion item. Defaults to an autogenerated value.
|
|
44
45
|
*/
|
|
@@ -52,10 +53,12 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
|
|
|
52
53
|
*/
|
|
53
54
|
initiallyExpanded: boolean;
|
|
54
55
|
/**
|
|
55
|
-
*
|
|
56
|
+
* @docs-private
|
|
57
|
+
*
|
|
58
|
+
* Internal function to access the disabled property of the DaffDisableableDirective
|
|
56
59
|
*/
|
|
57
|
-
disabled: boolean;
|
|
58
|
-
constructor(openDirective: DaffOpenableDirective);
|
|
60
|
+
get disabled(): boolean;
|
|
61
|
+
constructor(openDirective: DaffOpenableDirective, disabledDirective: DaffDisableableDirective);
|
|
59
62
|
/**
|
|
60
63
|
* @docs-private
|
|
61
64
|
*/
|
|
@@ -77,7 +80,7 @@ declare class DaffAccordionItemComponent implements OnInit, DaffOpenable {
|
|
|
77
80
|
*/
|
|
78
81
|
toggle(): void;
|
|
79
82
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffAccordionItemComponent, never>;
|
|
80
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; }; "contentId": { "alias": "contentId"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; };
|
|
83
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffAccordionItemComponent, "daff-accordion-item", never, { "itemId": { "alias": "itemId"; "required": false; }; "contentId": { "alias": "contentId"; "required": false; }; "initiallyExpanded": { "alias": "initiallyExpanded"; "required": false; }; }, {}, never, ["[daffAccordionItemTitle]", "*"], true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: { "toggled": "toggled"; }; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
|
|
81
84
|
}
|
|
82
85
|
|
|
83
86
|
/**
|
package/article/README.md
CHANGED
|
@@ -31,7 +31,7 @@ The link style in an article uses the default browser link style.
|
|
|
31
31
|
<design-land-example-viewer-container example="article-ol"></design-land-example-viewer-container>
|
|
32
32
|
|
|
33
33
|
### Code
|
|
34
|
-
These are styles for inline and multiline blocks of code.
|
|
34
|
+
These are styles for inline and multiline blocks of code. By default, a copy button is added to all code blocks. Disable this by adding a `nocopy` attribute to the `pre` element.
|
|
35
35
|
|
|
36
36
|
#### Inline code
|
|
37
37
|
<design-land-example-viewer-container example="article-code-inline"></design-land-example-viewer-container>
|
package/article/index.d.ts
CHANGED
|
@@ -1,10 +1,30 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
+
import { ViewContainerRef } from '@angular/core';
|
|
2
3
|
import * as i1 from '@angular/common';
|
|
3
4
|
|
|
5
|
+
declare class DaffArticleCopyButtonService {
|
|
6
|
+
private buttons;
|
|
7
|
+
/**
|
|
8
|
+
* Finds all code blocks and adds copy buttons to them.
|
|
9
|
+
* Skips code blocks with the `nocopy` attribute.
|
|
10
|
+
* @param hostElement - The host element to search for code blocks.
|
|
11
|
+
* @param viewContainerRef - The view container to create the copy button components.
|
|
12
|
+
*/
|
|
13
|
+
addCopyButtonsToCodeBlocks(hostElement: HTMLElement, viewContainerRef: ViewContainerRef): void;
|
|
14
|
+
/**
|
|
15
|
+
* Cleanup copy button references
|
|
16
|
+
*/
|
|
17
|
+
cleanup(): void;
|
|
18
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleCopyButtonService, never>;
|
|
19
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<DaffArticleCopyButtonService>;
|
|
20
|
+
}
|
|
21
|
+
|
|
4
22
|
/**
|
|
5
23
|
* A component for creating articles within your page.
|
|
6
24
|
*/
|
|
7
25
|
declare class DaffArticleComponent {
|
|
26
|
+
private copyButtonService;
|
|
27
|
+
constructor(copyButtonService: DaffArticleCopyButtonService);
|
|
8
28
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffArticleComponent, never>;
|
|
9
29
|
static ɵcmp: i0.ɵɵComponentDeclaration<DaffArticleComponent, "daff-article", never, {}, {}, never, ["*"], true, never>;
|
|
10
30
|
}
|
|
@@ -36,6 +36,11 @@
|
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
+
&__copy-button {
|
|
40
|
+
background: daff-color($neutral, 10);
|
|
41
|
+
border: 1px solid daff-color($neutral, 20);
|
|
42
|
+
}
|
|
43
|
+
|
|
39
44
|
hr {
|
|
40
45
|
background: daff-color($neutral, 20);
|
|
41
46
|
}
|
|
@@ -109,6 +114,11 @@
|
|
|
109
114
|
}
|
|
110
115
|
}
|
|
111
116
|
|
|
117
|
+
&__copy-button {
|
|
118
|
+
background: daff-color($neutral, 90);
|
|
119
|
+
border: 1px solid daff-color($neutral, 80);
|
|
120
|
+
}
|
|
121
|
+
|
|
112
122
|
hr {
|
|
113
123
|
background: daff-color($neutral, 80);
|
|
114
124
|
}
|
package/button/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import * as i1$1 from '@angular/common';
|
|
3
3
|
import * as i1 from '@daffodil/design';
|
|
4
|
-
import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffSuffixDirective } from '@daffodil/design';
|
|
4
|
+
import { DaffSizableDirective, DaffSizeSmallType, DaffSizeMediumType, DaffSizeLargeType, DaffPrefixDirective, DaffSuffixDirective, DaffDisableableDirective } from '@daffodil/design';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
7
|
* The size types that the DaffButtonComponent can implement.
|
|
@@ -14,6 +14,7 @@ declare class DaffButtonSizableDirective extends DaffSizableDirective<DaffButton
|
|
|
14
14
|
|
|
15
15
|
declare class DaffButtonBaseDirective {
|
|
16
16
|
private size;
|
|
17
|
+
private disabledDirective;
|
|
17
18
|
/**
|
|
18
19
|
* @docs-private
|
|
19
20
|
*/
|
|
@@ -22,19 +23,18 @@ declare class DaffButtonBaseDirective {
|
|
|
22
23
|
* @docs-private
|
|
23
24
|
*/
|
|
24
25
|
_suffix: DaffSuffixDirective;
|
|
25
|
-
constructor(size: DaffButtonSizableDirective);
|
|
26
|
+
constructor(size: DaffButtonSizableDirective, disabledDirective: DaffDisableableDirective);
|
|
26
27
|
/**
|
|
27
28
|
* Sets the tabindex.
|
|
28
29
|
*/
|
|
29
30
|
tabindex: number;
|
|
30
|
-
private _disabled;
|
|
31
31
|
/**
|
|
32
32
|
* The disabled state of the button.
|
|
33
33
|
*/
|
|
34
34
|
get disabled(): any;
|
|
35
35
|
set disabled(value: any);
|
|
36
36
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffButtonBaseDirective, never>;
|
|
37
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }]>;
|
|
37
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffButtonBaseDirective, "[daffButtonBase]", never, { "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["_prefix", "_suffix"], never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof DaffButtonSizableDirective; inputs: { "size": "size"; }; outputs: {}; }, { directive: typeof i1.DaffStatusableDirective; inputs: { "status": "status"; }; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffDisableableDirective; inputs: { "disabled": "disabled"; }; outputs: {}; }]>;
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
/**
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
&[disabled],
|
|
15
|
-
&.disabled {
|
|
15
|
+
&.daff-disabled {
|
|
16
16
|
&:hover {
|
|
17
17
|
box-shadow: 0 1px 5px -4px rgba(0, 0, 0, 0.5),
|
|
18
18
|
0 4px 8px 0 rgba(0, 0, 0, 0.05);
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
text-decoration: none;
|
|
36
36
|
|
|
37
37
|
&[disabled],
|
|
38
|
-
&.disabled {
|
|
38
|
+
&.daff-disabled {
|
|
39
39
|
cursor: not-allowed;
|
|
40
40
|
opacity: 0.5;
|
|
41
41
|
}
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
@mixin daff-button-background($border-radius) {
|
|
55
|
-
&:not(&[disabled], &.disabled) {
|
|
55
|
+
&:not(&[disabled], &.daff-disabled) {
|
|
56
56
|
&::after {
|
|
57
57
|
content: '';
|
|
58
58
|
border-radius: $border-radius;
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
@error 'Button Hover State: ' + map.get(a11y.$wcag-aa-errors, 'text-contrast');
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
$black: daff-color($
|
|
12
|
+
$black: daff-get-base-color($theme, 'black');
|
|
13
13
|
background-color: $base-color;
|
|
14
14
|
border: 1px solid $base-color;
|
|
15
15
|
box-shadow: 0 1px 5px -4px rgba($black, 0.5), 0 4px 8px 0 rgba($black, 0.05);
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
&[disabled],
|
|
69
|
-
&.disabled {
|
|
69
|
+
&.daff-disabled {
|
|
70
70
|
@include daff-raised-button-theme-variant(daff-color($neutral, 30));
|
|
71
71
|
color: daff-color($neutral, 50);
|
|
72
72
|
|
package/card/README.md
CHANGED
|
@@ -130,11 +130,3 @@ Use the `orientation` property to stack card content either `vertical` (default)
|
|
|
130
130
|
Cards default to a light gray background. Use the `color` property to change a card's color.
|
|
131
131
|
|
|
132
132
|
<design-land-example-viewer-container example="card-theming"></design-land-example-viewer-container>
|
|
133
|
-
|
|
134
|
-
## Deprecations
|
|
135
|
-
The raised card style has been deprecated in favor of the `elevated` property. Replace `<daff-raised-card>` with `<daff-card [elevated]="true">`
|
|
136
|
-
|
|
137
|
-
```html
|
|
138
|
-
<daff-card [elevated]="true">
|
|
139
|
-
</daff-card>
|
|
140
|
-
```
|
package/card/index.d.ts
CHANGED
|
@@ -1,37 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import * as i1$1 from '@angular/common';
|
|
3
3
|
import * as i1 from '@daffodil/design';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* The available orientations for a card.
|
|
7
|
-
*
|
|
8
|
-
* | Orientation | Description |
|
|
9
|
-
* | -- | -- |
|
|
10
|
-
* | `vertical` | Stacks card content from top to bottom. This is the default orientation. |
|
|
11
|
-
* | `horizontal` | Places card content side-by-side. On smaller screens, horizontal cards automatically switch to vertical for responsiveness. |
|
|
12
|
-
*/
|
|
13
|
-
type DaffCardOrientation = 'vertical' | 'horizontal';
|
|
14
|
-
/**
|
|
15
|
-
* Enum for representing the available card orientations.
|
|
16
|
-
* See {@link DaffCardOrientation} for descriptions of each orientation.
|
|
17
|
-
*/
|
|
18
|
-
declare enum DaffCardOrientationEnum {
|
|
19
|
-
Vertical = "vertical",
|
|
20
|
-
Horizontal = "horizontal"
|
|
21
|
-
}
|
|
4
|
+
import { DaffOrientableDirective } from '@daffodil/design';
|
|
22
5
|
|
|
23
6
|
declare class DaffCardBaseDirective {
|
|
24
|
-
|
|
25
|
-
* The orientation of a card.
|
|
26
|
-
*/
|
|
27
|
-
orientation: DaffCardOrientation;
|
|
7
|
+
private orientation;
|
|
28
8
|
/**
|
|
29
9
|
* Whether or not a card displays a shadow.
|
|
30
10
|
*/
|
|
31
11
|
elevated: boolean;
|
|
12
|
+
constructor(orientation: DaffOrientableDirective);
|
|
32
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardBaseDirective, never>;
|
|
33
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "
|
|
34
|
-
static ngAcceptInputType_orientation: DaffCardOrientation | null | undefined;
|
|
14
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCardBaseDirective, "[daffCardBase]", never, { "elevated": { "alias": "elevated"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.DaffArticleEncapsulatedDirective; inputs: {}; outputs: {}; }, { directive: typeof i1.DaffColorableDirective; inputs: { "color": "color"; }; outputs: {}; }, { directive: typeof i1.DaffOrientableDirective; inputs: { "orientation": "orientation"; }; outputs: {}; }]>;
|
|
35
15
|
}
|
|
36
16
|
|
|
37
17
|
/**
|
|
@@ -57,14 +37,6 @@ declare class DaffCardComponent extends DaffCardBaseDirective {
|
|
|
57
37
|
static ɵcmp: i0.ɵɵComponentDeclaration<DaffCardComponent, "daff-card,a[daff-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
|
|
58
38
|
}
|
|
59
39
|
|
|
60
|
-
/**
|
|
61
|
-
* @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
|
|
62
|
-
*/
|
|
63
|
-
declare class DaffRaisedCardComponent extends DaffCardBaseDirective {
|
|
64
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DaffRaisedCardComponent, never>;
|
|
65
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DaffRaisedCardComponent, "daff-raised-card,a[daff-raised-card]", never, {}, {}, never, ["[daffCardImage]", "[daffCardIcon]", "[daffCardTagline]", "[daffCardTitle]", "[daffCardContent]", "[daffCardActions]"], true, never>;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
40
|
/**
|
|
69
41
|
* A card variant with a stroked (outlined) border instead of a filled background.
|
|
70
42
|
*
|
|
@@ -172,7 +144,7 @@ declare class DaffCardActionsDirective {
|
|
|
172
144
|
*/
|
|
173
145
|
declare class DaffCardModule {
|
|
174
146
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffCardModule, never>;
|
|
175
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1$1.CommonModule, typeof DaffCardComponent, typeof
|
|
147
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCardModule, never, [typeof i1$1.CommonModule, typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective], [typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective]>;
|
|
176
148
|
static ɵinj: i0.ɵɵInjectorDeclaration<DaffCardModule>;
|
|
177
149
|
}
|
|
178
150
|
|
|
@@ -180,11 +152,6 @@ declare class DaffCardModule {
|
|
|
180
152
|
* @docs-private
|
|
181
153
|
*/
|
|
182
154
|
declare const DAFF_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
|
|
183
|
-
/**
|
|
184
|
-
* @docs-private
|
|
185
|
-
* @deprecated Deprecated in version 0.88.0. Will be removed in version 0.91.0.
|
|
186
|
-
*/
|
|
187
|
-
declare const DAFF_RAISED_CARD_COMPONENTS: readonly [typeof DaffRaisedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
|
|
188
155
|
/**
|
|
189
156
|
* @docs-private
|
|
190
157
|
*/
|
|
@@ -192,7 +159,6 @@ declare const DAFF_STROKED_CARD_COMPONENTS: readonly [typeof DaffStrokedCardComp
|
|
|
192
159
|
/**
|
|
193
160
|
* @docs-private
|
|
194
161
|
*/
|
|
195
|
-
declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof
|
|
162
|
+
declare const DAFF_ALL_CARD_COMPONENTS: readonly [typeof DaffCardComponent, typeof DaffStrokedCardComponent, typeof DaffCardIconDirective, typeof DaffCardImageDirective, typeof DaffCardTaglineDirective, typeof DaffCardTitleDirective, typeof DaffCardContentDirective, typeof DaffCardActionsDirective];
|
|
196
163
|
|
|
197
|
-
export { DAFF_ALL_CARD_COMPONENTS, DAFF_CARD_COMPONENTS,
|
|
198
|
-
export type { DaffCardOrientation };
|
|
164
|
+
export { DAFF_ALL_CARD_COMPONENTS, DAFF_CARD_COMPONENTS, DAFF_STROKED_CARD_COMPONENTS, DaffCardActionsDirective, DaffCardComponent, DaffCardContentDirective, DaffCardIconDirective, DaffCardImageDirective, DaffCardModule, DaffCardTaglineDirective, DaffCardTitleDirective, DaffStrokedCardComponent };
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
$tertiary: daff-get-palette($theme, tertiary);
|
|
32
32
|
$base: daff-get-base-color($theme, base);
|
|
33
33
|
$base-contrast: daff-get-base-color($theme, base-contrast);
|
|
34
|
-
$black: daff-get-base-color($theme, 'black');
|
|
35
34
|
$neutral: daff-get-palette($theme, neutral);
|
|
36
35
|
$mode: daff-get-theme-mode($theme);
|
|
37
36
|
|
|
@@ -43,8 +42,7 @@
|
|
|
43
42
|
}
|
|
44
43
|
}
|
|
45
44
|
|
|
46
|
-
.daff-card
|
|
47
|
-
.daff-raised-card {
|
|
45
|
+
.daff-card {
|
|
48
46
|
@include light($mode) {
|
|
49
47
|
@include daff-basic-card-theme-variant(daff-color($neutral, 10));
|
|
50
48
|
|
|
@@ -107,8 +105,7 @@
|
|
|
107
105
|
}
|
|
108
106
|
}
|
|
109
107
|
|
|
110
|
-
&.daff-card
|
|
111
|
-
&.daff-raised-card {
|
|
108
|
+
&.daff-card {
|
|
112
109
|
@include light($mode) {
|
|
113
110
|
@include daff-linkable-card-theme-variant(daff-color($neutral, 20));
|
|
114
111
|
|
package/card/src/card-base.scss
CHANGED
|
@@ -32,7 +32,7 @@ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
&.vertical {
|
|
35
|
+
&.daff-vertical {
|
|
36
36
|
flex-direction: column;
|
|
37
37
|
|
|
38
38
|
.daff-card__image {
|
|
@@ -44,7 +44,7 @@ $card-inner-border-radius: calc(#{$card-border-radius} - 1px);
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
&.horizontal {
|
|
47
|
+
&.daff-horizontal {
|
|
48
48
|
flex-wrap: wrap;
|
|
49
49
|
|
|
50
50
|
@include layout.breakpoint(mobile) {
|
|
File without changes
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { ElementRef, EventEmitter, ChangeDetectorRef, QueryList, OnInit } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { UntypedFormArray, ControlValueAccessor, NgControl } from '@angular/forms';
|
|
5
|
+
|
|
6
|
+
declare class DaffCheckboxComponent {
|
|
7
|
+
private _cdRef;
|
|
8
|
+
/**
|
|
9
|
+
* @docs-private
|
|
10
|
+
*/
|
|
11
|
+
nativeCheckbox: ElementRef<HTMLInputElement>;
|
|
12
|
+
/**
|
|
13
|
+
* The name of the checkbox.
|
|
14
|
+
*/
|
|
15
|
+
name: string;
|
|
16
|
+
/**
|
|
17
|
+
* The value of the checkbox.
|
|
18
|
+
*/
|
|
19
|
+
value: any;
|
|
20
|
+
/**
|
|
21
|
+
* Boolean value to determine whether or not the checkbox is checked.
|
|
22
|
+
*/
|
|
23
|
+
private _checked;
|
|
24
|
+
get checked(): boolean;
|
|
25
|
+
set checked(value: boolean);
|
|
26
|
+
/**
|
|
27
|
+
* The id of the checkbox. Must be unique. If not entered by a user then it is generated.
|
|
28
|
+
*/
|
|
29
|
+
id: string;
|
|
30
|
+
/**
|
|
31
|
+
* The aria-label of the checkbox.
|
|
32
|
+
*/
|
|
33
|
+
label: string;
|
|
34
|
+
/**
|
|
35
|
+
* The aria-labeledby of the checkbox.
|
|
36
|
+
*/
|
|
37
|
+
labeledBy: string;
|
|
38
|
+
/**
|
|
39
|
+
* Event on whether or not the selection has changed.
|
|
40
|
+
*/
|
|
41
|
+
becameChecked: EventEmitter<boolean>;
|
|
42
|
+
becameUnchecked: EventEmitter<void>;
|
|
43
|
+
/**
|
|
44
|
+
* Whether the checkbox is focused
|
|
45
|
+
*/
|
|
46
|
+
focused: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Whether the checkbox is disabled.
|
|
49
|
+
*/
|
|
50
|
+
disabled: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* The role of the component. Set to "checkbox".
|
|
53
|
+
*
|
|
54
|
+
* @docs-private
|
|
55
|
+
*/
|
|
56
|
+
role: string;
|
|
57
|
+
/**
|
|
58
|
+
* @docs-private
|
|
59
|
+
*/
|
|
60
|
+
_onChange(val: Event): void;
|
|
61
|
+
/**
|
|
62
|
+
* @docs-private
|
|
63
|
+
*/
|
|
64
|
+
get focusClass(): boolean;
|
|
65
|
+
/**
|
|
66
|
+
* @docs-private
|
|
67
|
+
*/
|
|
68
|
+
get disabledClass(): boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Sets focused to false.
|
|
71
|
+
*/
|
|
72
|
+
onBlur(): void;
|
|
73
|
+
/**
|
|
74
|
+
* Sets focused to true.
|
|
75
|
+
*/
|
|
76
|
+
onFocus(): void;
|
|
77
|
+
constructor(_cdRef: ChangeDetectorRef);
|
|
78
|
+
/**
|
|
79
|
+
* Sets checked to true.
|
|
80
|
+
*/
|
|
81
|
+
select(): void;
|
|
82
|
+
/**
|
|
83
|
+
* Sets checked to false
|
|
84
|
+
*/
|
|
85
|
+
deselect(): void;
|
|
86
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxComponent, never>;
|
|
87
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxComponent, "daff-checkbox", never, { "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "aria-label"; "required": false; }; "labeledBy": { "alias": "aria-labelledby"; "required": false; }; }, { "becameChecked": "becameChecked"; "becameUnchecked": "becameUnchecked"; }, never, ["*"], true, never>;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
declare class DaffCheckboxSetComponent {
|
|
91
|
+
formArray: UntypedFormArray;
|
|
92
|
+
/**
|
|
93
|
+
* The name of the checkbox-set
|
|
94
|
+
*/
|
|
95
|
+
name: string;
|
|
96
|
+
/**
|
|
97
|
+
* The role of the component. Set to "checkbox".
|
|
98
|
+
*
|
|
99
|
+
* @docs-private
|
|
100
|
+
*/
|
|
101
|
+
role: string;
|
|
102
|
+
/**
|
|
103
|
+
* The list of checkboxes in the set.
|
|
104
|
+
*
|
|
105
|
+
* @docs-private
|
|
106
|
+
*/
|
|
107
|
+
checkboxes: QueryList<DaffCheckboxComponent>;
|
|
108
|
+
valueList: EventEmitter<any[]>;
|
|
109
|
+
getValues(): any[];
|
|
110
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxSetComponent, never>;
|
|
111
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffCheckboxSetComponent, "daff-checkbox-set", never, { "formArray": { "alias": "formArray"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "valueList": "valueList"; }, ["checkboxes"], ["*"], true, never>;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* A directive for binding the DaffCheckboxComponent and the Control Value Accessor.
|
|
116
|
+
*/
|
|
117
|
+
declare class DaffCheckboxControlValueAccessorDirective implements OnInit, ControlValueAccessor {
|
|
118
|
+
_control: NgControl;
|
|
119
|
+
private _checkbox;
|
|
120
|
+
_onChange: (val: any) => void;
|
|
121
|
+
_onTouched: () => void;
|
|
122
|
+
/**
|
|
123
|
+
* The value of the ControlValueAccessor
|
|
124
|
+
*/
|
|
125
|
+
value: any;
|
|
126
|
+
/**
|
|
127
|
+
* The name of the ControlValueAccessor
|
|
128
|
+
*/
|
|
129
|
+
name: string;
|
|
130
|
+
constructor(_control: NgControl, _checkbox: DaffCheckboxComponent);
|
|
131
|
+
/**
|
|
132
|
+
* A lifecycle method called when the directive is initialized.
|
|
133
|
+
*/
|
|
134
|
+
/**
|
|
135
|
+
* @docs-private
|
|
136
|
+
*/
|
|
137
|
+
ngOnInit(): void;
|
|
138
|
+
/**
|
|
139
|
+
* writes a new value down into the component.
|
|
140
|
+
*/
|
|
141
|
+
writeValue(value: any): void;
|
|
142
|
+
/**
|
|
143
|
+
* Registers the change handler
|
|
144
|
+
*/
|
|
145
|
+
registerOnChange(fn: any): void;
|
|
146
|
+
/**
|
|
147
|
+
* Registers the touched handler
|
|
148
|
+
*/
|
|
149
|
+
registerOnTouched(fn: any): void;
|
|
150
|
+
/**
|
|
151
|
+
* Sets the disabled state.
|
|
152
|
+
*/
|
|
153
|
+
setDisabledState?(isDisabled: boolean): void;
|
|
154
|
+
/**
|
|
155
|
+
* calls the child checkbox's select function
|
|
156
|
+
*/
|
|
157
|
+
fireSelect(): void;
|
|
158
|
+
/**
|
|
159
|
+
* calls the child checkbox's deselect function
|
|
160
|
+
*/
|
|
161
|
+
fireDeselect(): void;
|
|
162
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxControlValueAccessorDirective, [{ optional: true; self: true; }, null]>;
|
|
163
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffCheckboxControlValueAccessorDirective, "daff-checkbox[ngModel], daff-checkbox[formControl], daff-checkbox[formControlName]", never, { "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, {}, never, never, true, never>;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
declare class DaffCheckboxModule {
|
|
167
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffCheckboxModule, never>;
|
|
168
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffCheckboxModule, never, [typeof i1.CommonModule, typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective], [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective]>;
|
|
169
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<DaffCheckboxModule>;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/**
|
|
173
|
+
* @docs-private
|
|
174
|
+
*/
|
|
175
|
+
declare const DAFF_CHECKBOX_COMPONENTS: readonly [typeof DaffCheckboxComponent, typeof DaffCheckboxSetComponent, typeof DaffCheckboxControlValueAccessorDirective];
|
|
176
|
+
|
|
177
|
+
export { DAFF_CHECKBOX_COMPONENTS, DaffCheckboxComponent, DaffCheckboxControlValueAccessorDirective, DaffCheckboxModule, DaffCheckboxSetComponent };
|
|
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
|
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, Directive, NgModule } from '@angular/core';
|
|
4
4
|
import * as i1 from '@daffodil/design';
|
|
5
|
-
import { DaffArticleEncapsulatedDirective, DaffOpenableDirective } from '@daffodil/design';
|
|
5
|
+
import { DaffArticleEncapsulatedDirective, DaffOpenableDirective, DaffDisableableDirective } from '@daffodil/design';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Groups accordion items.
|
|
@@ -47,8 +47,17 @@ let daffAccordionItemContentId = 0;
|
|
|
47
47
|
* ```
|
|
48
48
|
*/
|
|
49
49
|
class DaffAccordionItemComponent {
|
|
50
|
-
|
|
50
|
+
/**
|
|
51
|
+
* @docs-private
|
|
52
|
+
*
|
|
53
|
+
* Internal function to access the disabled property of the DaffDisableableDirective
|
|
54
|
+
*/
|
|
55
|
+
get disabled() {
|
|
56
|
+
return this.disabledDirective.disabled;
|
|
57
|
+
}
|
|
58
|
+
constructor(openDirective, disabledDirective) {
|
|
51
59
|
this.openDirective = openDirective;
|
|
60
|
+
this.disabledDirective = disabledDirective;
|
|
52
61
|
/**
|
|
53
62
|
* The unique id of an accordion item. Defaults to an autogenerated value.
|
|
54
63
|
*/
|
|
@@ -61,10 +70,6 @@ class DaffAccordionItemComponent {
|
|
|
61
70
|
* Whether or not an accordion item is initially expanded by default.
|
|
62
71
|
*/
|
|
63
72
|
this.initiallyExpanded = false;
|
|
64
|
-
/**
|
|
65
|
-
* Disables an accordion item and prevents it from being expanded or collapsed.
|
|
66
|
-
*/
|
|
67
|
-
this.disabled = false;
|
|
68
73
|
this.openDirective.stateless = false;
|
|
69
74
|
}
|
|
70
75
|
/**
|
|
@@ -97,25 +102,29 @@ class DaffAccordionItemComponent {
|
|
|
97
102
|
toggle() {
|
|
98
103
|
this.openDirective.toggle();
|
|
99
104
|
}
|
|
100
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded"
|
|
105
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemComponent, deps: [{ token: i1.DaffOpenableDirective }, { token: i1.DaffDisableableDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
106
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.1", type: DaffAccordionItemComponent, isStandalone: true, selector: "daff-accordion-item", inputs: { itemId: "itemId", contentId: "contentId", initiallyExpanded: "initiallyExpanded" }, host: { classAttribute: "daff-accordion-item" }, hostDirectives: [{ directive: i1.DaffOpenableDirective, outputs: ["toggled", "toggled"] }, { directive: i1.DaffDisableableDirective, inputs: ["disabled", "disabled"] }], 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 class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n <ng-content></ng-content>\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.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
102
107
|
}
|
|
103
108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: DaffAccordionItemComponent, decorators: [{
|
|
104
109
|
type: Component,
|
|
105
|
-
args: [{ selector: 'daff-accordion-item', hostDirectives: [
|
|
110
|
+
args: [{ selector: 'daff-accordion-item', hostDirectives: [
|
|
111
|
+
{
|
|
106
112
|
directive: DaffOpenableDirective,
|
|
107
113
|
outputs: ['toggled'],
|
|
108
|
-
}
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
directive: DaffDisableableDirective,
|
|
117
|
+
inputs: ['disabled'],
|
|
118
|
+
},
|
|
119
|
+
], host: {
|
|
109
120
|
'class': 'daff-accordion-item',
|
|
110
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n <ng-content></ng-content>\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-
|
|
111
|
-
}], ctorParameters: () => [{ type: i1.DaffOpenableDirective }], propDecorators: { itemId: [{
|
|
121
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 class=\"daff-accordion-item__content\" [id]=\"contentId\" [attr.aria-labelledby]=\"itemId\" role=\"region\">\n <ng-content></ng-content>\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.daff-open .daff-accordion-item__header:after{top:56%;transform:translateY(-50%) rotate(225deg)}.daff-accordion-item.daff-open .daff-accordion-item__content{height:auto;opacity:1;padding:0 1rem 1rem;visibility:visible}.daff-accordion-item.daff-disabled .daff-accordion-item__header{cursor:not-allowed;opacity:.5}.daff-accordion-item__title{font-size:1rem;line-height:1.5rem;font-weight:500;inline-size:100%;margin:0;padding:0 2rem 0 0;text-align:start}.daff-accordion-item__content{height:0;opacity:0;visibility:hidden;transition:opacity .15s ease-in}.daff-accordion-item__content>p{margin:0 0 1rem}.daff-accordion-item__content>p:last-child{margin:0}\n"] }]
|
|
122
|
+
}], ctorParameters: () => [{ type: i1.DaffOpenableDirective }, { type: i1.DaffDisableableDirective }], propDecorators: { itemId: [{
|
|
112
123
|
type: Input
|
|
113
124
|
}], contentId: [{
|
|
114
125
|
type: Input
|
|
115
126
|
}], initiallyExpanded: [{
|
|
116
127
|
type: Input
|
|
117
|
-
}], disabled: [{
|
|
118
|
-
type: Input
|
|
119
128
|
}] } });
|
|
120
129
|
|
|
121
130
|
/* eslint-disable quote-props */
|