@daffodil/design 0.82.0 → 0.83.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion/src/accordion-theme.scss +28 -6
- package/article/src/article-theme.scss +118 -64
- package/button/src/button/basic/button-theme.scss +21 -16
- package/button/src/button/button-base.scss +15 -1
- package/button/src/button/flat/flat-theme.scss +2 -2
- package/button/src/button/icon/icon-theme.scss +183 -79
- package/button/src/button/stroked/stroked-theme.scss +9 -9
- package/button/src/button/underline/underline-theme.scss +2 -2
- package/card/examples/card-theming/card-theming.component.d.ts +2 -1
- package/card/examples/public_api.d.ts +1 -1
- package/card/src/card/stroked/stroked-theme.scss +102 -13
- package/card/src/card-base-theme.scss +126 -55
- package/fesm2022/daffodil-design-accordion.mjs +2 -2
- package/fesm2022/daffodil-design-accordion.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +12 -12
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-card-examples.mjs +14 -12
- package/fesm2022/daffodil-design-card-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-media-gallery.mjs +57 -18
- package/fesm2022/daffodil-design-media-gallery.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +3 -2
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification.mjs +2 -2
- package/fesm2022/daffodil-design-notification.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar-examples.mjs +2 -2
- package/fesm2022/daffodil-design-progress-bar-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-progress-bar.mjs +0 -3
- package/fesm2022/daffodil-design-progress-bar.mjs.map +1 -1
- package/fesm2022/daffodil-design-sidebar.mjs +3 -8
- package/fesm2022/daffodil-design-sidebar.mjs.map +1 -1
- package/fesm2022/daffodil-design-switch.mjs +33 -8
- package/fesm2022/daffodil-design-switch.mjs.map +1 -1
- package/fesm2022/daffodil-design-tabs.mjs +4 -4
- package/fesm2022/daffodil-design-tabs.mjs.map +1 -1
- package/fesm2022/daffodil-design-toast.mjs +14 -13
- package/fesm2022/daffodil-design-toast.mjs.map +1 -1
- package/fesm2022/daffodil-design-tree.mjs +2 -2
- package/media-gallery/README.md +3 -3
- package/media-gallery/media-gallery/media-gallery.component.d.ts +21 -5
- package/media-gallery/public_api.d.ts +3 -3
- package/media-gallery/thumbnail/thumbnail.directive.d.ts +23 -6
- package/notification/src/notification-theme.scss +62 -23
- package/package.json +1 -1
- package/progress-bar/README.md +2 -4
- package/progress-bar/progress-bar.component.d.ts +0 -3
- package/progress-bar/src/progress-bar-theme.scss +17 -8
- package/sidebar/public_api.d.ts +10 -11
- package/sidebar/sidebar.d.ts +1 -2
- package/sidebar/sidebar.module.d.ts +1 -2
- package/switch/src/switch-theme.scss +29 -10
- package/switch/switch/switch.component.d.ts +31 -6
- package/tabs/src/tabs-theme.scss +31 -13
- package/toast/src/toast-theme.scss +80 -33
- package/toast/toast/toast-template.component.d.ts +3 -1
- package/tree/src/tree-theme.scss +39 -13
|
@@ -2,36 +2,53 @@ import { TemplateRef, OnInit } from '@angular/core';
|
|
|
2
2
|
import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* DaffThumbnailDirective is a structural directive used to mark elements as thumbnails within the `DaffMediaGalleryComponent`.
|
|
6
6
|
*
|
|
7
7
|
* ```html
|
|
8
8
|
* <ng-template daffThumbnail></ng-template>
|
|
9
9
|
* ```
|
|
10
10
|
*/
|
|
11
11
|
export declare class DaffThumbnailDirective implements OnInit {
|
|
12
|
+
/**
|
|
13
|
+
* @docs-private
|
|
14
|
+
*/
|
|
12
15
|
gallery: DaffMediaGalleryRegistration;
|
|
16
|
+
/**
|
|
17
|
+
* @docs-private
|
|
18
|
+
*/
|
|
13
19
|
templateRef: TemplateRef<unknown>;
|
|
20
|
+
private _increment;
|
|
14
21
|
/**
|
|
15
|
-
*
|
|
22
|
+
* @docs-private
|
|
23
|
+
*
|
|
24
|
+
* The autogenerated unique id for a thumbnail.
|
|
16
25
|
*/
|
|
17
26
|
get id(): string;
|
|
18
27
|
/**
|
|
19
|
-
*
|
|
28
|
+
* @docs-private
|
|
29
|
+
*
|
|
30
|
+
* The unique id of the selected thumbnail.
|
|
20
31
|
*/
|
|
21
|
-
get
|
|
32
|
+
get selectedThumbnailId(): string;
|
|
22
33
|
/**
|
|
23
34
|
* The file path to a thumbnail, presumably an image.
|
|
24
35
|
*/
|
|
25
36
|
thumbnailSrc: any;
|
|
26
37
|
/**
|
|
27
|
-
*
|
|
38
|
+
* Provides an accessible label for a thumbnail.
|
|
28
39
|
*/
|
|
29
40
|
label: string;
|
|
41
|
+
/** Indicates whether the thumbnail represents a video. */
|
|
30
42
|
isVideo: boolean;
|
|
43
|
+
constructor(
|
|
44
|
+
/**
|
|
45
|
+
* @docs-private
|
|
46
|
+
*/
|
|
47
|
+
gallery: DaffMediaGalleryRegistration,
|
|
31
48
|
/**
|
|
32
49
|
* @docs-private
|
|
33
50
|
*/
|
|
34
|
-
|
|
51
|
+
templateRef: TemplateRef<unknown>);
|
|
35
52
|
/**
|
|
36
53
|
* @docs-private
|
|
37
54
|
*/
|
|
@@ -13,41 +13,80 @@
|
|
|
13
13
|
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
|
14
14
|
$base: core.daff-map-get($theme, 'core', 'base');
|
|
15
15
|
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
|
16
|
-
$white: core.daff-map-get($theme, 'core', 'white');
|
|
17
16
|
$black: core.daff-map-get($theme, 'core', 'black');
|
|
17
|
+
$white: core.daff-map-get($theme, 'core', 'white');
|
|
18
|
+
$type: core.daff-map-get($theme, 'core', 'type');
|
|
18
19
|
|
|
19
20
|
.daff-notification {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
@include theming.light($type) {
|
|
22
|
+
background: theming.daff-color($neutral, 10);
|
|
23
|
+
border: 1px solid theming.daff-color($neutral, 20);
|
|
24
|
+
color: $black;
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
26
|
+
&.daff-success {
|
|
27
|
+
background: theming.daff-color($success, 10);
|
|
28
|
+
border: 1px solid theming.daff-color($success, 20);
|
|
29
|
+
color: theming.daff-text-contrast(theming.daff-color($success, 10));
|
|
28
30
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
.daff-prefix {
|
|
32
|
+
color: theming.daff-color($success, 80);
|
|
33
|
+
}
|
|
31
34
|
}
|
|
32
|
-
}
|
|
33
35
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
&.daff-warn {
|
|
37
|
+
background: theming.daff-color($warn, 10);
|
|
38
|
+
border: 1px solid theming.daff-color($warn, 20);
|
|
39
|
+
color: theming.daff-text-contrast(theming.daff-color($warn, 10));
|
|
38
40
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
+
.daff-prefix {
|
|
42
|
+
color: theming.daff-color($warn, 80);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&.daff-critical {
|
|
47
|
+
background: theming.daff-color($critical, 10);
|
|
48
|
+
border: 1px solid theming.daff-color($critical, 20);
|
|
49
|
+
color: theming.daff-text-contrast(theming.daff-color($critical, 10));
|
|
50
|
+
|
|
51
|
+
.daff-prefix {
|
|
52
|
+
color: theming.daff-color($critical, 80);
|
|
53
|
+
}
|
|
41
54
|
}
|
|
42
55
|
}
|
|
43
56
|
|
|
44
|
-
|
|
45
|
-
background: theming.daff-color($
|
|
46
|
-
border: 1px solid theming.daff-color($
|
|
47
|
-
color:
|
|
57
|
+
@include theming.dark($type) {
|
|
58
|
+
background: theming.daff-color($neutral, 90);
|
|
59
|
+
border: 1px solid theming.daff-color($neutral, 80);
|
|
60
|
+
color: $white;
|
|
61
|
+
|
|
62
|
+
&.daff-success {
|
|
63
|
+
background: theming.daff-color($success, 90);
|
|
64
|
+
border: 1px solid theming.daff-color($success, 80);
|
|
65
|
+
color: theming.daff-text-contrast(theming.daff-color($success, 90));
|
|
66
|
+
|
|
67
|
+
.daff-prefix {
|
|
68
|
+
color: theming.daff-color($success, 30);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&.daff-warn {
|
|
73
|
+
background: theming.daff-color($warn, 90);
|
|
74
|
+
border: 1px solid theming.daff-color($warn, 80);
|
|
75
|
+
color: theming.daff-text-contrast(theming.daff-color($warn, 90));
|
|
76
|
+
|
|
77
|
+
.daff-prefix {
|
|
78
|
+
color: theming.daff-color($warn, 30);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
&.daff-critical {
|
|
83
|
+
background: theming.daff-color($critical, 90);
|
|
84
|
+
border: 1px solid theming.daff-color($critical, 80);
|
|
85
|
+
color: theming.daff-text-contrast(theming.daff-color($critical, 90));
|
|
48
86
|
|
|
49
|
-
|
|
50
|
-
|
|
87
|
+
.daff-prefix {
|
|
88
|
+
color: theming.daff-color($critical, 30);
|
|
89
|
+
}
|
|
51
90
|
}
|
|
52
91
|
}
|
|
53
92
|
}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.
|
|
1
|
+
{"name":"@daffodil/design","nx":{"targets":{"build":{"outputs":["{workspaceRoot}/dist/design"]}}},"version":"0.83.0","author":"Graycore LLC","license":"MIT","bugs":{"url":"https://github.com/graycoreio/daffodil/issues"},"homepage":"https://github.com/graycoreio/daffodil","description":"A consistent, sane api driver that works with different ecommerce systems.","repository":{"type":"git","url":"https://github.com/graycoreio/daffodil"},"peerDependencies":{"@angular/animations":"^19.0.0","@angular/common":"^19.0.0","@angular/core":"^19.0.0","@angular/forms":"^19.0.0","@angular/cdk":"^19.0.0","@daffodil/core":"0.83.0","@fortawesome/angular-fontawesome":"^1.0.0","@fortawesome/fontawesome-svg-core":"^6.4.2","@fortawesome/free-solid-svg-icons":"^6.4.2","@fortawesome/free-brands-svg-icons":"^6.4.2","@fortawesome/free-regular-svg-icons":"^6.4.2","modern-normalize":"^0.5.0","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^7.6.0"},"exports":{"./scss/global":{"sass":"./scss/global.scss"},"./scss/theme":{"sass":"./scss/theme.scss"},"./scss/utilities":{"sass":"./scss/utilities.scss"},"./scss/typography":{"sass":"./scss/typography/_index.scss"},"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/daffodil-design.mjs"},"./accordion":{"types":"./accordion/index.d.ts","default":"./fesm2022/daffodil-design-accordion.mjs"},"./article":{"types":"./article/index.d.ts","default":"./fesm2022/daffodil-design-article.mjs"},"./breadcrumb":{"types":"./breadcrumb/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb.mjs"},"./button":{"types":"./button/index.d.ts","default":"./fesm2022/daffodil-design-button.mjs"},"./callout":{"types":"./callout/index.d.ts","default":"./fesm2022/daffodil-design-callout.mjs"},"./card":{"types":"./card/index.d.ts","default":"./fesm2022/daffodil-design-card.mjs"},"./container":{"types":"./container/index.d.ts","default":"./fesm2022/daffodil-design-container.mjs"},"./hero":{"types":"./hero/index.d.ts","default":"./fesm2022/daffodil-design-hero.mjs"},"./image":{"types":"./image/index.d.ts","default":"./fesm2022/daffodil-design-image.mjs"},"./link-set":{"types":"./link-set/index.d.ts","default":"./fesm2022/daffodil-design-link-set.mjs"},"./list":{"types":"./list/index.d.ts","default":"./fesm2022/daffodil-design-list.mjs"},"./loading-icon":{"types":"./loading-icon/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon.mjs"},"./media-gallery":{"types":"./media-gallery/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery.mjs"},"./menu":{"types":"./menu/index.d.ts","default":"./fesm2022/daffodil-design-menu.mjs"},"./modal":{"types":"./modal/index.d.ts","default":"./fesm2022/daffodil-design-modal.mjs"},"./navbar":{"types":"./navbar/index.d.ts","default":"./fesm2022/daffodil-design-navbar.mjs"},"./notification":{"types":"./notification/index.d.ts","default":"./fesm2022/daffodil-design-notification.mjs"},"./paginator":{"types":"./paginator/index.d.ts","default":"./fesm2022/daffodil-design-paginator.mjs"},"./progress-bar":{"types":"./progress-bar/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar.mjs"},"./sidebar":{"types":"./sidebar/index.d.ts","default":"./fesm2022/daffodil-design-sidebar.mjs"},"./switch":{"types":"./switch/index.d.ts","default":"./fesm2022/daffodil-design-switch.mjs"},"./tabs":{"types":"./tabs/index.d.ts","default":"./fesm2022/daffodil-design-tabs.mjs"},"./text-snippet":{"types":"./text-snippet/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet.mjs"},"./toast":{"types":"./toast/index.d.ts","default":"./fesm2022/daffodil-design-toast.mjs"},"./tree":{"types":"./tree/index.d.ts","default":"./fesm2022/daffodil-design-tree.mjs"},"./youtube-player":{"types":"./youtube-player/index.d.ts","default":"./fesm2022/daffodil-design-youtube-player.mjs"},"./accordion/examples":{"types":"./accordion/examples/index.d.ts","default":"./fesm2022/daffodil-design-accordion-examples.mjs"},"./article/examples":{"types":"./article/examples/index.d.ts","default":"./fesm2022/daffodil-design-article-examples.mjs"},"./breadcrumb/examples":{"types":"./breadcrumb/examples/index.d.ts","default":"./fesm2022/daffodil-design-breadcrumb-examples.mjs"},"./button/examples":{"types":"./button/examples/index.d.ts","default":"./fesm2022/daffodil-design-button-examples.mjs"},"./callout/examples":{"types":"./callout/examples/index.d.ts","default":"./fesm2022/daffodil-design-callout-examples.mjs"},"./card/examples":{"types":"./card/examples/index.d.ts","default":"./fesm2022/daffodil-design-card-examples.mjs"},"./checkbox/examples":{"types":"./checkbox/examples/index.d.ts","default":"./fesm2022/daffodil-design-checkbox-examples.mjs"},"./container/examples":{"types":"./container/examples/index.d.ts","default":"./fesm2022/daffodil-design-container-examples.mjs"},"./hero/examples":{"types":"./hero/examples/index.d.ts","default":"./fesm2022/daffodil-design-hero-examples.mjs"},"./image/examples":{"types":"./image/examples/index.d.ts","default":"./fesm2022/daffodil-design-image-examples.mjs"},"./input/examples":{"types":"./input/examples/index.d.ts","default":"./fesm2022/daffodil-design-input-examples.mjs"},"./list/examples":{"types":"./list/examples/index.d.ts","default":"./fesm2022/daffodil-design-list-examples.mjs"},"./loading-icon/examples":{"types":"./loading-icon/examples/index.d.ts","default":"./fesm2022/daffodil-design-loading-icon-examples.mjs"},"./media-gallery/examples":{"types":"./media-gallery/examples/index.d.ts","default":"./fesm2022/daffodil-design-media-gallery-examples.mjs"},"./menu/examples":{"types":"./menu/examples/index.d.ts","default":"./fesm2022/daffodil-design-menu-examples.mjs"},"./modal/examples":{"types":"./modal/examples/index.d.ts","default":"./fesm2022/daffodil-design-modal-examples.mjs"},"./navbar/examples":{"types":"./navbar/examples/index.d.ts","default":"./fesm2022/daffodil-design-navbar-examples.mjs"},"./notification/examples":{"types":"./notification/examples/index.d.ts","default":"./fesm2022/daffodil-design-notification-examples.mjs"},"./paginator/examples":{"types":"./paginator/examples/index.d.ts","default":"./fesm2022/daffodil-design-paginator-examples.mjs"},"./progress-bar/examples":{"types":"./progress-bar/examples/index.d.ts","default":"./fesm2022/daffodil-design-progress-bar-examples.mjs"},"./quantity-field/examples":{"types":"./quantity-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field-examples.mjs"},"./radio/examples":{"types":"./radio/examples/index.d.ts","default":"./fesm2022/daffodil-design-radio-examples.mjs"},"./sidebar/examples":{"types":"./sidebar/examples/index.d.ts","default":"./fesm2022/daffodil-design-sidebar-examples.mjs"},"./switch/examples":{"types":"./switch/examples/index.d.ts","default":"./fesm2022/daffodil-design-switch-examples.mjs"},"./tabs/examples":{"types":"./tabs/examples/index.d.ts","default":"./fesm2022/daffodil-design-tabs-examples.mjs"},"./text-snippet/examples":{"types":"./text-snippet/examples/index.d.ts","default":"./fesm2022/daffodil-design-text-snippet-examples.mjs"},"./toast/examples":{"types":"./toast/examples/index.d.ts","default":"./fesm2022/daffodil-design-toast-examples.mjs"},"./tree/examples":{"types":"./tree/examples/index.d.ts","default":"./fesm2022/daffodil-design-tree-examples.mjs"}},"module":"fesm2022/daffodil-design.mjs","typings":"index.d.ts","sideEffects":false,"dependencies":{"tslib":"^2.3.0"}}
|
package/progress-bar/README.md
CHANGED
|
@@ -57,11 +57,9 @@ Indeterminate progress bars should be used when the loading percentage of a task
|
|
|
57
57
|
<design-land-example-viewer-container example="progress-bar-indeterminate"></design-land-example-viewer-container>
|
|
58
58
|
|
|
59
59
|
## Theming
|
|
60
|
-
|
|
60
|
+
Use the `color` property to change the color of a progress bar. The default color is primary.
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
> `theme`, `theme-contrast`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
|
|
62
|
+
> `theme`, `white`, and `black` should be used with caution to ensure that there is sufficient contrast.
|
|
65
63
|
|
|
66
64
|
<design-land-example-viewer-container example="progress-bar-themes"></design-land-example-viewer-container>
|
|
67
65
|
|
|
@@ -4,9 +4,6 @@ import { DaffColorableDirective } from '@daffodil/design';
|
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "@daffodil/design";
|
|
6
6
|
export declare const clamp: (number: number, min: number, max: number) => number;
|
|
7
|
-
/**
|
|
8
|
-
* @inheritdoc
|
|
9
|
-
*/
|
|
10
7
|
export declare class DaffProgressBarComponent {
|
|
11
8
|
private _changeDetectorRef;
|
|
12
9
|
private colorable;
|
|
@@ -11,33 +11,42 @@
|
|
|
11
11
|
$white: core.daff-map-get($theme, 'core', 'white');
|
|
12
12
|
$black: core.daff-map-get($theme, 'core', 'black');
|
|
13
13
|
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
|
14
|
+
$type: core.daff-map-get($theme, 'core', 'type');
|
|
14
15
|
|
|
15
16
|
.daff-progress-bar {
|
|
16
17
|
$root: '.daff-progress-bar';
|
|
17
18
|
|
|
18
19
|
#{$root}__label {
|
|
19
|
-
color: theming.daff-
|
|
20
|
+
color: theming.daff-text-contrast($base);
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
@include theming.light($type) {
|
|
24
|
+
#{$root}__track {
|
|
25
|
+
background: theming.daff-color($neutral, 30);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@include theming.dark($type) {
|
|
30
|
+
#{$root}__track {
|
|
31
|
+
background: theming.daff-color($neutral, 80);
|
|
32
|
+
}
|
|
24
33
|
}
|
|
25
34
|
|
|
26
35
|
&.daff-primary {
|
|
27
36
|
#{$root}__fill {
|
|
28
|
-
background: theming.daff-
|
|
37
|
+
background: theming.daff-color($primary);
|
|
29
38
|
}
|
|
30
39
|
}
|
|
31
40
|
|
|
32
41
|
&.daff-secondary {
|
|
33
42
|
#{$root}__fill {
|
|
34
|
-
background: theming.daff-
|
|
43
|
+
background: theming.daff-color($secondary);
|
|
35
44
|
}
|
|
36
45
|
}
|
|
37
46
|
|
|
38
47
|
&.daff-tertiary {
|
|
39
48
|
#{$root}__fill {
|
|
40
|
-
background: theming.daff-
|
|
49
|
+
background: theming.daff-color($tertiary);
|
|
41
50
|
}
|
|
42
51
|
}
|
|
43
52
|
|
|
@@ -53,13 +62,13 @@
|
|
|
53
62
|
}
|
|
54
63
|
}
|
|
55
64
|
|
|
56
|
-
&.daff-
|
|
65
|
+
&.daff-light {
|
|
57
66
|
#{$root}__fill {
|
|
58
67
|
background: $white;
|
|
59
68
|
}
|
|
60
69
|
}
|
|
61
70
|
|
|
62
|
-
&.daff-
|
|
71
|
+
&.daff-dark {
|
|
63
72
|
#{$root}__fill {
|
|
64
73
|
background: $black;
|
|
65
74
|
}
|
package/sidebar/public_api.d.ts
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
export { DaffSidebarModule } from './sidebar.module';
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
export
|
|
6
|
-
export
|
|
7
|
-
export
|
|
8
|
-
export
|
|
9
|
-
export
|
|
10
|
-
export * from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
|
|
2
|
+
export { DaffSidebarRegistration } from './service/registration.type';
|
|
3
|
+
export { DaffSidebarService } from './service/sidebar.service';
|
|
4
|
+
export { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
|
|
5
|
+
export { DaffSidebarComponent } from './sidebar/sidebar.component';
|
|
6
|
+
export { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
|
|
7
|
+
export { DaffSidebarFooterComponent } from './sidebar-footer/sidebar-footer.component';
|
|
8
|
+
export { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
|
|
9
|
+
export { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-header-action/sidebar-header-action.directive';
|
|
11
10
|
export { DaffSidebarMode, DaffSidebarModeEnum, } from './helper/sidebar-mode';
|
|
12
11
|
export { DaffSidebarSide, DaffSidebarSideEnum, } from './helper/sidebar-side';
|
|
13
|
-
export
|
|
14
|
-
export
|
|
12
|
+
export { daffSidebarIsDockedMode } from './helper/is-docked-mode';
|
|
13
|
+
export { daffSidebarIsFloatingMode } from './helper/is-floating-mode';
|
|
15
14
|
export { DAFF_SIDEBAR_COMPONENTS } from './sidebar';
|
package/sidebar/sidebar.d.ts
CHANGED
|
@@ -4,8 +4,7 @@ import { DaffSidebarHeaderActionDirective } from './sidebar-header/sidebar-heade
|
|
|
4
4
|
import { DaffSidebarHeaderTitleDirective } from './sidebar-header/sidebar-header-title/sidebar-header-title.directive';
|
|
5
5
|
import { DaffSidebarHeaderComponent } from './sidebar-header/sidebar-header.component';
|
|
6
6
|
import { DaffSidebarViewportComponent } from './sidebar-viewport/sidebar-viewport.component';
|
|
7
|
-
import { DaffSidebarViewportBackdropComponent } from './sidebar-viewport-backdrop/sidebar-viewport-backdrop.component';
|
|
8
7
|
/**
|
|
9
8
|
* @docs-private
|
|
10
9
|
*/
|
|
11
|
-
export declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective
|
|
10
|
+
export declare const DAFF_SIDEBAR_COMPONENTS: readonly [typeof DaffSidebarComponent, typeof DaffSidebarViewportComponent, typeof DaffSidebarHeaderComponent, typeof DaffSidebarFooterComponent, typeof DaffSidebarHeaderTitleDirective, typeof DaffSidebarHeaderActionDirective];
|
|
@@ -7,12 +7,11 @@ import * as i5 from "./sidebar-header/sidebar-header.component";
|
|
|
7
7
|
import * as i6 from "./sidebar-footer/sidebar-footer.component";
|
|
8
8
|
import * as i7 from "./sidebar-header/sidebar-header-title/sidebar-header-title.directive";
|
|
9
9
|
import * as i8 from "./sidebar-header/sidebar-header-action/sidebar-header-action.directive";
|
|
10
|
-
import * as i9 from "./sidebar-viewport-backdrop/sidebar-viewport-backdrop.component";
|
|
11
10
|
/**
|
|
12
11
|
* @deprecated in favor of {@link DAFF_SIDEBAR_COMPONENTS}. Deprecated in version 0.78.0. Will be removed in version 1.0.0.
|
|
13
12
|
*/
|
|
14
13
|
export declare class DaffSidebarModule {
|
|
15
14
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSidebarModule, never>;
|
|
16
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective
|
|
15
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DaffSidebarModule, never, [typeof i1.CommonModule, typeof i2.A11yModule, typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective], [typeof i3.DaffSidebarComponent, typeof i4.DaffSidebarViewportComponent, typeof i5.DaffSidebarHeaderComponent, typeof i6.DaffSidebarFooterComponent, typeof i7.DaffSidebarHeaderTitleDirective, typeof i8.DaffSidebarHeaderActionDirective]>;
|
|
17
16
|
static ɵinj: i0.ɵɵInjectorDeclaration<DaffSidebarModule>;
|
|
18
17
|
}
|
|
@@ -4,27 +4,46 @@
|
|
|
4
4
|
|
|
5
5
|
@mixin daff-switch-theme($theme) {
|
|
6
6
|
$primary: core.daff-map-get($theme, primary);
|
|
7
|
-
$base: core.daff-map-get($theme, 'core', 'base');
|
|
8
|
-
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
|
9
7
|
$white: core.daff-map-get($theme, 'core', 'white');
|
|
10
|
-
$black: core.daff-map-get($theme, 'core', 'black');
|
|
11
8
|
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
|
9
|
+
$type: core.daff-map-get($theme, 'core', 'type');
|
|
12
10
|
|
|
13
11
|
.daff-switch {
|
|
14
12
|
&__toggle {
|
|
15
|
-
background-color: theming.daff-illuminate($base, $neutral, 3);
|
|
16
13
|
border: 2px solid transparent;
|
|
17
14
|
|
|
18
|
-
&:focus-within {
|
|
19
|
-
border: 2px solid theming.daff-illuminate($base, $neutral, 2);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
15
|
&.daff-checked {
|
|
23
16
|
background-color: theming.daff-color($primary);
|
|
24
17
|
}
|
|
25
18
|
|
|
26
|
-
|
|
27
|
-
background-color: $
|
|
19
|
+
@include theming.light($type) {
|
|
20
|
+
background-color: theming.daff-color($neutral, 30);
|
|
21
|
+
|
|
22
|
+
&:focus-within {
|
|
23
|
+
border: 2px solid theming.daff-color($neutral, 20);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&::before {
|
|
27
|
+
background-color: $white;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@include theming.dark($type) {
|
|
32
|
+
background-color: theming.daff-color($neutral, 80);
|
|
33
|
+
|
|
34
|
+
&:focus-within {
|
|
35
|
+
border: 2px solid theming.daff-color($neutral, 90);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&::before {
|
|
39
|
+
background-color: theming.daff-color($neutral, 40);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&.daff-checked {
|
|
43
|
+
&::before {
|
|
44
|
+
background-color: $white;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
28
47
|
}
|
|
29
48
|
}
|
|
30
49
|
}
|
|
@@ -4,12 +4,9 @@ import * as i0 from "@angular/core";
|
|
|
4
4
|
/**
|
|
5
5
|
* The switch component provides a way to toggle between two settings.
|
|
6
6
|
*
|
|
7
|
-
* @example
|
|
8
|
-
*
|
|
9
7
|
* ```html
|
|
10
|
-
* <daff-switch
|
|
11
|
-
*
|
|
12
|
-
* <daff-error-message>Error message</daff-error-message>
|
|
8
|
+
* <daff-switch>
|
|
9
|
+
* Label
|
|
13
10
|
* </daff-switch>
|
|
14
11
|
* ```
|
|
15
12
|
*/
|
|
@@ -19,8 +16,17 @@ export declare class DaffSwitchComponent {
|
|
|
19
16
|
*/
|
|
20
17
|
get disabled(): any;
|
|
21
18
|
set disabled(value: any);
|
|
19
|
+
/**
|
|
20
|
+
* @docs-private
|
|
21
|
+
*/
|
|
22
22
|
get disabledAttribute(): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* @docs-private
|
|
25
|
+
*/
|
|
23
26
|
get ariaDisabled(): boolean;
|
|
27
|
+
/**
|
|
28
|
+
* @docs-private
|
|
29
|
+
*/
|
|
24
30
|
get classes(): string;
|
|
25
31
|
/**
|
|
26
32
|
* Whether the switch is loading.
|
|
@@ -31,13 +37,16 @@ export declare class DaffSwitchComponent {
|
|
|
31
37
|
*/
|
|
32
38
|
checked: boolean;
|
|
33
39
|
/**
|
|
34
|
-
* The position of the label relative to the switch.
|
|
40
|
+
* The position of the label relative to the switch.
|
|
35
41
|
*/
|
|
36
42
|
labelPosition: DaffLabelPosition;
|
|
37
43
|
/**
|
|
38
44
|
* Whether the switch shows an error.
|
|
39
45
|
*/
|
|
40
46
|
error: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* @docs-private
|
|
49
|
+
*/
|
|
41
50
|
_disabled: boolean;
|
|
42
51
|
handleKeydown(event: KeyboardEvent): void;
|
|
43
52
|
/**
|
|
@@ -48,8 +57,24 @@ export declare class DaffSwitchComponent {
|
|
|
48
57
|
* aria-label for the switch.
|
|
49
58
|
*/
|
|
50
59
|
ariaLabel: string;
|
|
60
|
+
/**
|
|
61
|
+
* A unique id for the switch.
|
|
62
|
+
*
|
|
63
|
+
* The `id` is automatically generated by linking the prefix 'daff-switch-' with an incrementing number. This value can be customized by passing a different `id` value via the component's `id` input.
|
|
64
|
+
*
|
|
65
|
+
* @example Using the `id` property
|
|
66
|
+
* ```html
|
|
67
|
+
* <daff-switch [id]="'custom-id'"></daff-switch>
|
|
68
|
+
* ```
|
|
69
|
+
*/
|
|
51
70
|
id: string;
|
|
71
|
+
/**
|
|
72
|
+
* Output event triggered when the switch has been toggled.
|
|
73
|
+
*/
|
|
52
74
|
toggled: EventEmitter<boolean>;
|
|
75
|
+
/**
|
|
76
|
+
* @docs-private
|
|
77
|
+
*/
|
|
53
78
|
onToggle(): void;
|
|
54
79
|
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSwitchComponent, never>;
|
|
55
80
|
static ɵcmp: i0.ɵɵComponentDeclaration<DaffSwitchComponent, "daff-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "error": { "alias": "error"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "toggled": "toggled"; }, never, ["*", "daff-error-message"], true, never>;
|
package/tabs/src/tabs-theme.scss
CHANGED
|
@@ -4,27 +4,45 @@
|
|
|
4
4
|
|
|
5
5
|
@mixin daff-tabs-theme($theme) {
|
|
6
6
|
$primary: core.daff-map-get($theme, primary);
|
|
7
|
-
$secondary: core.daff-map-get($theme, secondary);
|
|
8
|
-
$tertiary: core.daff-map-get($theme, tertiary);
|
|
9
7
|
$neutral: core.daff-map-get($theme, 'core', 'neutral');
|
|
10
|
-
$base: core.daff-map-get($theme, 'core', 'base');
|
|
11
8
|
$base-contrast: core.daff-map-get($theme, 'core', 'base-contrast');
|
|
12
|
-
$
|
|
13
|
-
$black: core.daff-map-get($theme, 'core', 'black');
|
|
9
|
+
$type: core.daff-map-get($theme, 'core', 'type');
|
|
14
10
|
|
|
15
|
-
.
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
@include theming.light($type) {
|
|
12
|
+
.daff-tabs {
|
|
13
|
+
&__tab-list {
|
|
14
|
+
&::after {
|
|
15
|
+
background: theming.daff-color($neutral, 20);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.daff-tab-activator {
|
|
21
|
+
border-bottom: 2px solid theming.daff-color($neutral, 20);
|
|
22
|
+
color: $base-contrast;
|
|
23
|
+
|
|
24
|
+
&.daff-selected {
|
|
25
|
+
border-bottom: 2px solid theming.daff-color($primary);
|
|
19
26
|
}
|
|
20
27
|
}
|
|
21
28
|
}
|
|
22
29
|
|
|
23
|
-
.
|
|
24
|
-
|
|
30
|
+
@include theming.dark($type) {
|
|
31
|
+
.daff-tabs {
|
|
32
|
+
&__tab-list {
|
|
33
|
+
&::after {
|
|
34
|
+
background: theming.daff-color($neutral, 80);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
25
38
|
|
|
26
|
-
|
|
27
|
-
border-bottom: 2px solid theming.daff-color($
|
|
39
|
+
.daff-tab-activator {
|
|
40
|
+
border-bottom: 2px solid theming.daff-color($neutral, 80);
|
|
41
|
+
color: $base-contrast;
|
|
42
|
+
|
|
43
|
+
&.daff-selected {
|
|
44
|
+
border-bottom: 2px solid theming.daff-color($primary);
|
|
45
|
+
}
|
|
28
46
|
}
|
|
29
47
|
}
|
|
30
48
|
}
|