@daffodil/design 0.86.0 → 0.87.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/atoms/form/form-field/action/action.directive.d.ts +9 -0
- package/atoms/form/form-field/form-field/form-field.component.d.ts +33 -1
- package/atoms/form/form-field/form-field.d.ts +2 -1
- package/atoms/form/form-field/public_api.d.ts +1 -0
- package/button/README.md +58 -42
- package/button/button/button-base.directive.d.ts +10 -4
- package/button/button.d.ts +22 -1
- package/button/public_api.d.ts +1 -1
- package/button/src/button/button-base.scss +0 -1
- package/button/src/button/raised/raised-theme.scss +3 -3
- package/core/statusable/statusable.directive.d.ts +22 -2
- package/fesm2022/daffodil-design-article.mjs +2 -2
- package/fesm2022/daffodil-design-article.mjs.map +1 -1
- package/fesm2022/daffodil-design-button.mjs +58 -16
- package/fesm2022/daffodil-design-button.mjs.map +1 -1
- package/fesm2022/daffodil-design-form-field-examples.mjs +95 -0
- package/fesm2022/daffodil-design-form-field-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-input-examples.mjs +5 -5
- package/fesm2022/daffodil-design-input-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-input.mjs +11 -15
- package/fesm2022/daffodil-design-input.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal-examples.mjs +3 -2
- package/fesm2022/daffodil-design-modal-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-modal.mjs +12 -11
- package/fesm2022/daffodil-design-modal.mjs.map +1 -1
- package/fesm2022/daffodil-design-notification-examples.mjs +3 -3
- package/fesm2022/daffodil-design-notification-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-quantity-field-examples.mjs +4 -4
- package/fesm2022/daffodil-design-quantity-field-examples.mjs.map +1 -1
- package/fesm2022/daffodil-design-select-examples.mjs +117 -0
- package/fesm2022/daffodil-design-select-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-select.mjs +431 -0
- package/fesm2022/daffodil-design-select.mjs.map +1 -0
- package/fesm2022/daffodil-design-textarea-examples.mjs +66 -0
- package/fesm2022/daffodil-design-textarea-examples.mjs.map +1 -0
- package/fesm2022/daffodil-design-textarea.mjs +124 -0
- package/fesm2022/daffodil-design-textarea.mjs.map +1 -0
- package/fesm2022/daffodil-design.mjs +135 -11
- package/fesm2022/daffodil-design.mjs.map +1 -1
- package/form-field/examples/examples.d.ts +3 -0
- package/form-field/examples/form-field-appearances/form-field-appearances.component.d.ts +7 -0
- package/form-field/examples/form-field-with-action/form-field-with-action.component.d.ts +9 -0
- package/form-field/examples/form-field-with-prefix/form-field-with-prefix.component.d.ts +6 -0
- package/form-field/examples/form-field-with-suffix/form-field-with-suffix.component.d.ts +6 -0
- package/form-field/examples/index.d.ts +1 -0
- package/form-field/examples/public_api.d.ts +1 -0
- package/input/input.component.d.ts +4 -8
- package/modal/modal/modal.component.d.ts +5 -3
- package/notification/src/notification-theme.scss +34 -18
- package/package.json +1 -1
- package/scss/theme.scss +8 -0
- package/scss/theming/illuminate/illuminate.scss +2 -0
- package/select/README.md +8 -0
- package/select/animation/select-animation-state.d.ts +7 -0
- package/select/animation/select-animation.d.ts +4 -0
- package/select/animation/state.enum.d.ts +4 -0
- package/select/examples/default-select/default-select.component.d.ts +8 -0
- package/select/examples/disabled-select/disabled-select.component.d.ts +8 -0
- package/select/examples/index.d.ts +1 -0
- package/select/examples/models/address.type.d.ts +7 -0
- package/select/examples/models/addresses.d.ts +2 -0
- package/select/examples/public_api.d.ts +3 -0
- package/select/examples/select-with-error/select-with-error.component.d.ts +8 -0
- package/select/examples/skeleton-select/skeleton-select.component.d.ts +8 -0
- package/select/index.d.ts +1 -0
- package/select/option/context.type.d.ts +17 -0
- package/select/option/option.directive.d.ts +11 -0
- package/select/public_api.d.ts +4 -0
- package/select/select/select.component.d.ts +170 -0
- package/select/select.d.ts +4 -0
- package/select/src/select-theme.scss +75 -0
- package/src/atoms/form/form-field/form-field/form-field-theme.scss +35 -8
- package/textarea/README.md +28 -0
- package/textarea/examples/basic-textarea/basic-textarea.component.d.ts +5 -0
- package/textarea/examples/examples.d.ts +2 -0
- package/textarea/examples/index.d.ts +1 -0
- package/textarea/examples/public_api.d.ts +1 -0
- package/textarea/examples/textarea-disabled/textarea-disabled.component.d.ts +7 -0
- package/textarea/examples/textarea-error/textarea-error.component.d.ts +7 -0
- package/textarea/index.d.ts +1 -0
- package/textarea/public_api.d.ts +1 -0
- package/textarea/textarea.component.d.ts +59 -0
@@ -0,0 +1,3 @@
|
|
1
|
+
import { FormFieldWithPrefixComponent } from './form-field-with-prefix/form-field-with-prefix.component';
|
2
|
+
import { FormFieldWithSuffixComponent } from './form-field-with-suffix/form-field-with-suffix.component';
|
3
|
+
export declare const FORM_FIELD_EXAMPLES: (typeof FormFieldWithPrefixComponent | typeof FormFieldWithSuffixComponent)[];
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class FormFieldAppearancesComponent {
|
3
|
+
faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
faEye: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
5
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldAppearancesComponent, never>;
|
6
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldAppearancesComponent, "form-field-appearances", never, {}, {}, never, never, true, never>;
|
7
|
+
}
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class FormFieldWithActionComponent {
|
3
|
+
faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
faCircleXmark: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
5
|
+
inputValue: string;
|
6
|
+
clearInput(): void;
|
7
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWithActionComponent, never>;
|
8
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWithActionComponent, "form-field-with-action", never, {}, {}, never, never, true, never>;
|
9
|
+
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class FormFieldWithPrefixComponent {
|
3
|
+
faUser: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWithPrefixComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWithPrefixComponent, "form-field-with-prefix", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import * as i0 from "@angular/core";
|
2
|
+
export declare class FormFieldWithSuffixComponent {
|
3
|
+
faPencil: import("@fortawesome/fontawesome-common-types").IconDefinition;
|
4
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldWithSuffixComponent, never>;
|
5
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldWithSuffixComponent, "form-field-with-suffix", never, {}, {}, never, never, true, never>;
|
6
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1 @@
|
|
1
|
+
export { FORM_FIELD_EXAMPLES } from './examples';
|
@@ -1,11 +1,11 @@
|
|
1
|
-
import { ElementRef, OnInit
|
1
|
+
import { ElementRef, OnInit } from '@angular/core';
|
2
2
|
import { NgControl } from '@angular/forms';
|
3
3
|
import { DaffFormFieldComponent, DaffFormFieldControl } from '@daffodil/design';
|
4
4
|
import * as i0 from "@angular/core";
|
5
5
|
/**
|
6
6
|
* DaffInputComponent provides the same functionality as a native `<input>` and contains custom styling and functionality.
|
7
7
|
*/
|
8
|
-
export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit
|
8
|
+
export declare class DaffInputComponent extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit {
|
9
9
|
/** @docs-private */
|
10
10
|
ngControl: NgControl;
|
11
11
|
private _elementRef;
|
@@ -18,7 +18,7 @@ export declare class DaffInputComponent extends DaffFormFieldControl<string> imp
|
|
18
18
|
focused: boolean;
|
19
19
|
/** @docs-private */
|
20
20
|
focus(): void;
|
21
|
-
private _id;
|
21
|
+
private get _id();
|
22
22
|
/**
|
23
23
|
* @docs-private
|
24
24
|
*/
|
@@ -32,16 +32,12 @@ export declare class DaffInputComponent extends DaffFormFieldControl<string> imp
|
|
32
32
|
constructor(
|
33
33
|
/** @docs-private */
|
34
34
|
ngControl: NgControl, _elementRef: ElementRef<HTMLInputElement>, formField: DaffFormFieldComponent);
|
35
|
-
/**
|
36
|
-
* @docs-private
|
37
|
-
*/
|
38
|
-
ngOnChanges(changes: SimpleChanges): void;
|
39
35
|
/** @docs-private */
|
40
36
|
ngOnInit(): void;
|
41
37
|
/** @docs-private */
|
42
38
|
onFocus(): void;
|
43
39
|
/** @docs-private */
|
44
40
|
get value(): string;
|
45
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null,
|
41
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffInputComponent, [{ optional: true; self: true; }, null, { optional: true; }]>;
|
46
42
|
static ɵcmp: i0.ɵɵComponentDeclaration<DaffInputComponent, "input[daff-input]", never, {}, {}, never, ["*"], true, never>;
|
47
43
|
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import { AnimationEvent } from '@angular/animations';
|
2
2
|
import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
|
3
3
|
import { ComponentPortal } from '@angular/cdk/portal';
|
4
|
-
import { EventEmitter, ElementRef, AfterContentInit, AfterViewInit } from '@angular/core';
|
5
|
-
import { DaffOpenable, DaffOpenableDirective } from '@daffodil/design';
|
4
|
+
import { EventEmitter, ElementRef, AfterContentInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
|
5
|
+
import { DaffOpenable, DaffOpenableDirective, DaffFocusStackService } from '@daffodil/design';
|
6
6
|
import { DaffModalService } from '../service/modal.service';
|
7
7
|
import * as i0 from "@angular/core";
|
8
8
|
import * as i1 from "@daffodil/design";
|
@@ -11,6 +11,8 @@ export declare class DaffModalComponent implements AfterContentInit, AfterViewIn
|
|
11
11
|
private _focusTrapFactory;
|
12
12
|
private elementRef;
|
13
13
|
private openDirective;
|
14
|
+
private _focusStack;
|
15
|
+
private changeDetector;
|
14
16
|
/**
|
15
17
|
* Sets a class of .daff-modal to the host element.
|
16
18
|
*/
|
@@ -60,7 +62,7 @@ export declare class DaffModalComponent implements AfterContentInit, AfterViewIn
|
|
60
62
|
*/
|
61
63
|
onEscape(): void;
|
62
64
|
private _focusTrap;
|
63
|
-
constructor(modalService: DaffModalService, _focusTrapFactory: ConfigurableFocusTrapFactory, elementRef: ElementRef<HTMLElement>, openDirective: DaffOpenableDirective);
|
65
|
+
constructor(modalService: DaffModalService, _focusTrapFactory: ConfigurableFocusTrapFactory, elementRef: ElementRef<HTMLElement>, openDirective: DaffOpenableDirective, _focusStack: DaffFocusStackService, changeDetector: ChangeDetectorRef);
|
64
66
|
/**
|
65
67
|
* @docs-private
|
66
68
|
*/
|
@@ -2,8 +2,6 @@
|
|
2
2
|
|
3
3
|
@mixin daff-notification-theme($theme) {
|
4
4
|
$primary: daff-get-palette($theme, primary);
|
5
|
-
$secondary: daff-get-palette($theme, secondary);
|
6
|
-
$tertiary: daff-get-palette($theme, tertiary);
|
7
5
|
$info: daff-get-palette($theme, informational);
|
8
6
|
$warn: daff-get-palette($theme, warn);
|
9
7
|
$critical: daff-get-palette($theme, critical);
|
@@ -11,20 +9,28 @@
|
|
11
9
|
$neutral: daff-get-palette($theme, neutral);
|
12
10
|
$base: daff-get-base-color($theme, base);
|
13
11
|
$base-contrast: daff-get-base-color($theme, base-contrast);
|
14
|
-
$black: daff-get-base-color($theme, 'black');
|
15
|
-
$white: daff-get-base-color($theme, 'white');
|
16
12
|
$mode: daff-get-theme-mode($theme);
|
17
13
|
|
18
14
|
.daff-notification {
|
19
15
|
@include light($mode) {
|
20
16
|
background: daff-color($neutral, 10);
|
21
17
|
border: 1px solid daff-color($neutral, 20);
|
22
|
-
color: $
|
18
|
+
color: $base-contrast;
|
19
|
+
|
20
|
+
&.daff-info {
|
21
|
+
background: daff-color($primary, 10);
|
22
|
+
border: 1px solid daff-color($primary, 20);
|
23
|
+
color: $base-contrast;
|
24
|
+
|
25
|
+
.daff-prefix {
|
26
|
+
color: daff-color($primary, 80);
|
27
|
+
}
|
28
|
+
}
|
23
29
|
|
24
30
|
&.daff-success {
|
25
31
|
background: daff-color($success, 10);
|
26
32
|
border: 1px solid daff-color($success, 20);
|
27
|
-
color:
|
33
|
+
color: $base-contrast;
|
28
34
|
|
29
35
|
.daff-prefix {
|
30
36
|
color: daff-color($success, 80);
|
@@ -34,7 +40,7 @@
|
|
34
40
|
&.daff-warn {
|
35
41
|
background: daff-color($warn, 10);
|
36
42
|
border: 1px solid daff-color($warn, 20);
|
37
|
-
color:
|
43
|
+
color: $base-contrast;
|
38
44
|
|
39
45
|
.daff-prefix {
|
40
46
|
color: daff-color($warn, 80);
|
@@ -44,7 +50,7 @@
|
|
44
50
|
&.daff-critical {
|
45
51
|
background: daff-color($critical, 10);
|
46
52
|
border: 1px solid daff-color($critical, 20);
|
47
|
-
color:
|
53
|
+
color: $base-contrast;
|
48
54
|
|
49
55
|
.daff-prefix {
|
50
56
|
color: daff-color($critical, 80);
|
@@ -55,12 +61,22 @@
|
|
55
61
|
@include dark($mode) {
|
56
62
|
background: daff-color($neutral, 90);
|
57
63
|
border: 1px solid daff-color($neutral, 80);
|
58
|
-
color: $
|
64
|
+
color: $base-contrast;
|
65
|
+
|
66
|
+
&.daff-info {
|
67
|
+
background: daff-color($primary, 100);
|
68
|
+
border: 1px solid daff-color($primary, 90);
|
69
|
+
color: $base-contrast;
|
70
|
+
|
71
|
+
.daff-prefix {
|
72
|
+
color: daff-color($primary, 30);
|
73
|
+
}
|
74
|
+
}
|
59
75
|
|
60
76
|
&.daff-success {
|
61
|
-
background: daff-color($success,
|
62
|
-
border: 1px solid daff-color($success,
|
63
|
-
color:
|
77
|
+
background: daff-color($success, 100);
|
78
|
+
border: 1px solid daff-color($success, 90);
|
79
|
+
color: $base-contrast;
|
64
80
|
|
65
81
|
.daff-prefix {
|
66
82
|
color: daff-color($success, 30);
|
@@ -68,9 +84,9 @@
|
|
68
84
|
}
|
69
85
|
|
70
86
|
&.daff-warn {
|
71
|
-
background: daff-color($warn,
|
72
|
-
border: 1px solid daff-color($warn,
|
73
|
-
color:
|
87
|
+
background: daff-color($warn, 100);
|
88
|
+
border: 1px solid daff-color($warn, 90);
|
89
|
+
color: $base-contrast;
|
74
90
|
|
75
91
|
.daff-prefix {
|
76
92
|
color: daff-color($warn, 30);
|
@@ -78,9 +94,9 @@
|
|
78
94
|
}
|
79
95
|
|
80
96
|
&.daff-critical {
|
81
|
-
background: daff-color($critical,
|
82
|
-
border: 1px solid daff-color($critical,
|
83
|
-
color:
|
97
|
+
background: daff-color($critical, 100);
|
98
|
+
border: 1px solid daff-color($critical, 90);
|
99
|
+
color: $base-contrast;
|
84
100
|
|
85
101
|
.daff-prefix {
|
86
102
|
color: daff-color($critical, 30);
|
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.87.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.87.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":"^3.0.1","rxjs":"7.8.1"},"optionalDependencies":{"@faker-js/faker":"^9.8.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"},"./input":{"types":"./input/index.d.ts","default":"./fesm2022/daffodil-design-input.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"},"./quantity-field":{"types":"./quantity-field/index.d.ts","default":"./fesm2022/daffodil-design-quantity-field.mjs"},"./select":{"types":"./select/index.d.ts","default":"./fesm2022/daffodil-design-select.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"},"./textarea":{"types":"./textarea/index.d.ts","default":"./fesm2022/daffodil-design-textarea.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"},"./form-field/examples":{"types":"./form-field/examples/index.d.ts","default":"./fesm2022/daffodil-design-form-field-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"},"./select/examples":{"types":"./select/examples/index.d.ts","default":"./fesm2022/daffodil-design-select-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"},"./textarea/examples":{"types":"./textarea/examples/index.d.ts","default":"./fesm2022/daffodil-design-textarea-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/scss/theme.scss
CHANGED
@@ -44,6 +44,7 @@
|
|
44
44
|
@use '../navbar/src/navbar-theme' as navbar;
|
45
45
|
@use '../notification/src/notification-theme' as notification;
|
46
46
|
@use '../paginator/src/paginator-theme' as paginator;
|
47
|
+
@use '../select/src/select-theme' as select;
|
47
48
|
@use '../sidebar/src/sidebar-theme' as sidebar;
|
48
49
|
@use '../switch/src/switch-theme' as switch;
|
49
50
|
@use '../progress-bar/src/progress-bar-theme' as progress-bar;
|
@@ -88,7 +89,14 @@
|
|
88
89
|
@include error-message.daff-error-message-theme($theme);
|
89
90
|
@include hint.daff-hint-theme($theme);
|
90
91
|
@include native-select.daff-native-select-theme($theme);
|
92
|
+
@include select.daff-select-theme($theme);
|
91
93
|
|
94
|
+
@include loading-icon.daff-loading-icon-theme($theme);
|
95
|
+
@include progress-bar.daff-progress-bar-theme($theme);
|
96
|
+
|
97
|
+
@include accordion.daff-accordion-theme($theme);
|
98
|
+
@include article.daff-article-theme($theme);
|
99
|
+
@include callout.daff-callout-theme($theme);
|
92
100
|
@include hero.daff-hero-theme($theme);
|
93
101
|
@include list.daff-list-theme($theme);
|
94
102
|
@include loading-icon.daff-loading-icon-theme($theme);
|
package/select/README.md
ADDED
@@ -0,0 +1,8 @@
|
|
1
|
+
# Select
|
2
|
+
|
3
|
+
## Usage
|
4
|
+
The consuming component should pass a list of option values and a form control into `daff-select` as props. The consumer is fully in charge of rendering the options and selected option. This is accomplished by passing templates into two content projection slots.
|
5
|
+
|
6
|
+
## Slots
|
7
|
+
### `daffSelectOption`
|
8
|
+
`daffSelectOption` provides the template for the list of options inside the select dropdown. Two values are bound to this slot context: `option` and `isSelected`. See `DaffSelectOptionDirectiveContext` for more info.
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import { DaffSelectAnimationState } from './state.enum';
|
2
|
+
/**
|
3
|
+
* Turns a boolean into a string of 'open' or 'close'.
|
4
|
+
*
|
5
|
+
* @param open A boolean representing the open status of an select.
|
6
|
+
*/
|
7
|
+
export declare const getAnimationState: (open: boolean) => DaffSelectAnimationState;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { FormControl } from '@angular/forms';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class DefaultSelectComponent {
|
4
|
+
control: FormControl<any>;
|
5
|
+
options: import("../models/address.type").SelectExampleAddress[];
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DefaultSelectComponent, never>;
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DefaultSelectComponent, "default-select", never, {}, {}, never, never, true, never>;
|
8
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { UntypedFormControl } from '@angular/forms';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class DisabledSelectComponent {
|
4
|
+
disabled: UntypedFormControl;
|
5
|
+
options: import("../models/address.type").SelectExampleAddress[];
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DisabledSelectComponent, never>;
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DisabledSelectComponent, "disabled-select", never, {}, {}, never, never, true, never>;
|
8
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,3 @@
|
|
1
|
+
import { DefaultSelectComponent } from './default-select/default-select.component';
|
2
|
+
import { DisabledSelectComponent } from './disabled-select/disabled-select.component';
|
3
|
+
export declare const SELECT_EXAMPLES: (typeof DefaultSelectComponent | typeof DisabledSelectComponent)[];
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { FormControl } from '@angular/forms';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class SelectWithErrorComponent {
|
4
|
+
control: FormControl<string>;
|
5
|
+
options: import("../models/address.type").SelectExampleAddress[];
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SelectWithErrorComponent, never>;
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SelectWithErrorComponent, "select-with-error", never, {}, {}, never, never, true, never>;
|
8
|
+
}
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { FormControl } from '@angular/forms';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
export declare class SkeletonSelectComponent {
|
4
|
+
control: FormControl<any>;
|
5
|
+
options: import("../models/address.type").SelectExampleAddress[];
|
6
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonSelectComponent, never>;
|
7
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonSelectComponent, "skeleton-select", never, {}, {}, never, never, true, never>;
|
8
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './public_api';
|
@@ -0,0 +1,17 @@
|
|
1
|
+
/**
|
2
|
+
* The slot context for {@link DaffSelectOptionDirective}.
|
3
|
+
*/
|
4
|
+
export interface DaffSelectOptionDirectiveContext<T = unknown> {
|
5
|
+
/**
|
6
|
+
* The option for this element in the list.
|
7
|
+
*/
|
8
|
+
option: T;
|
9
|
+
/**
|
10
|
+
* Whether this option is the currently selected one.
|
11
|
+
*/
|
12
|
+
isSelected: boolean;
|
13
|
+
/**
|
14
|
+
* Whether this option is the currently highlighted one in the options list.
|
15
|
+
*/
|
16
|
+
isHighlighted?: boolean;
|
17
|
+
}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { TemplateRef } from '@angular/core';
|
2
|
+
import * as i0 from "@angular/core";
|
3
|
+
/**
|
4
|
+
* The directive provides the template for a list of options inside the select dropdown.
|
5
|
+
*/
|
6
|
+
export declare class DaffSelectOptionDirective {
|
7
|
+
templateRef?: TemplateRef<unknown>;
|
8
|
+
constructor(templateRef?: TemplateRef<unknown>);
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectOptionDirective, [{ optional: true; }]>;
|
10
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<DaffSelectOptionDirective, "[daffSelectOption]", never, {}, {}, never, never, true, never>;
|
11
|
+
}
|
@@ -0,0 +1,170 @@
|
|
1
|
+
import { Overlay } from '@angular/cdk/overlay';
|
2
|
+
import { TemplatePortal } from '@angular/cdk/portal';
|
3
|
+
import { ChangeDetectorRef, OnInit, ElementRef, OnDestroy } from '@angular/core';
|
4
|
+
import { ControlValueAccessor, NgControl } from '@angular/forms';
|
5
|
+
import { DaffFormFieldComponent, DaffFormFieldControl, DaffOpenableDirective } from '@daffodil/design';
|
6
|
+
import { DaffSelectAnimationState } from '../animation/state.enum';
|
7
|
+
import { DaffSelectOptionDirective } from '../option/option.directive';
|
8
|
+
import * as i0 from "@angular/core";
|
9
|
+
import * as i1 from "@daffodil/design";
|
10
|
+
/**
|
11
|
+
* DaffSelectComponent is a form control component that presents a list of selectable options,
|
12
|
+
* similar to the native `<select>` element we call `<daff-native-select>`.
|
13
|
+
*
|
14
|
+
*/
|
15
|
+
export declare class DaffSelectComponent<T = unknown> extends DaffFormFieldControl<string> implements DaffFormFieldControl<string>, OnInit, OnDestroy, ControlValueAccessor {
|
16
|
+
private cd;
|
17
|
+
private document;
|
18
|
+
ngControl: NgControl;
|
19
|
+
private overlay;
|
20
|
+
private openDirective;
|
21
|
+
private formField;
|
22
|
+
/** @docs-private */
|
23
|
+
controlType: string;
|
24
|
+
/**
|
25
|
+
* @docs-private
|
26
|
+
*/
|
27
|
+
supportsAutoLabelling: boolean;
|
28
|
+
private _destroyed;
|
29
|
+
private _overlay;
|
30
|
+
private _value;
|
31
|
+
private _highlighted;
|
32
|
+
private _animationState;
|
33
|
+
private _animationFinishCallbackQueue;
|
34
|
+
/**
|
35
|
+
* @docs-private
|
36
|
+
*/
|
37
|
+
get focused(): boolean;
|
38
|
+
/**
|
39
|
+
* @docs-private
|
40
|
+
*/
|
41
|
+
get raised(): boolean;
|
42
|
+
/** @docs-private */
|
43
|
+
focus(): void;
|
44
|
+
/** @docs-private */
|
45
|
+
blur(): void;
|
46
|
+
/**
|
47
|
+
* @docs-private
|
48
|
+
*/
|
49
|
+
_disabled: boolean;
|
50
|
+
disabled: boolean;
|
51
|
+
options: T[];
|
52
|
+
/**
|
53
|
+
* @docs-private
|
54
|
+
*/
|
55
|
+
get isOpen(): boolean;
|
56
|
+
/**
|
57
|
+
* @docs-private
|
58
|
+
*/
|
59
|
+
class: boolean;
|
60
|
+
/**
|
61
|
+
* @docs-private
|
62
|
+
*/
|
63
|
+
get disabledClass(): boolean;
|
64
|
+
/**
|
65
|
+
* @docs-private
|
66
|
+
*
|
67
|
+
* `aria-labelledby` for the select.
|
68
|
+
*/
|
69
|
+
ariaLabelledBy: string;
|
70
|
+
/**
|
71
|
+
* The unique id of the select options. Defaults to an autogenerated value.
|
72
|
+
*/
|
73
|
+
optionsId: string;
|
74
|
+
constructor(cd: ChangeDetectorRef, document: Document, ngControl: NgControl, overlay: Overlay, openDirective: DaffOpenableDirective, formField: DaffFormFieldComponent);
|
75
|
+
/**
|
76
|
+
* @docs-private
|
77
|
+
*/
|
78
|
+
buttonElement: ElementRef<HTMLButtonElement>;
|
79
|
+
/**
|
80
|
+
* @docs-private
|
81
|
+
*/
|
82
|
+
optionsTemplatePortal: TemplatePortal<unknown>;
|
83
|
+
/**
|
84
|
+
* @docs-private
|
85
|
+
*/
|
86
|
+
optionsElement: ElementRef<HTMLDivElement>;
|
87
|
+
/**
|
88
|
+
* @docs-private
|
89
|
+
*/
|
90
|
+
optionTemplate?: DaffSelectOptionDirective;
|
91
|
+
/**
|
92
|
+
* @docs-private
|
93
|
+
*/
|
94
|
+
get animationState(): DaffSelectAnimationState;
|
95
|
+
/**
|
96
|
+
* @docs-private
|
97
|
+
*/
|
98
|
+
get value(): any;
|
99
|
+
/**
|
100
|
+
* @docs-private
|
101
|
+
*/
|
102
|
+
get highlighted(): number;
|
103
|
+
set highlighted(val: number);
|
104
|
+
private focusOptionsList;
|
105
|
+
private focusButton;
|
106
|
+
/**
|
107
|
+
* @docs-private
|
108
|
+
*/
|
109
|
+
ngOnDestroy(): void;
|
110
|
+
private onChange;
|
111
|
+
private onTouched;
|
112
|
+
/**
|
113
|
+
* @docs-private
|
114
|
+
*/
|
115
|
+
writeValue(value: T): void;
|
116
|
+
/**
|
117
|
+
* @docs-private
|
118
|
+
*/
|
119
|
+
registerOnChange(fn: (value: T) => void): void;
|
120
|
+
/**
|
121
|
+
* @docs-private
|
122
|
+
*/
|
123
|
+
registerOnTouched(fn: any): void;
|
124
|
+
/**
|
125
|
+
* @docs-private
|
126
|
+
*/
|
127
|
+
setDisabledState(isDisabled: boolean): void;
|
128
|
+
/**
|
129
|
+
* @docs-private
|
130
|
+
*/
|
131
|
+
flushValue(): void;
|
132
|
+
/**
|
133
|
+
* @docs-private
|
134
|
+
*/
|
135
|
+
ngOnInit(): void;
|
136
|
+
/**
|
137
|
+
* @docs-private
|
138
|
+
*/
|
139
|
+
animationFinished(): void;
|
140
|
+
/**
|
141
|
+
* Opens the options list.
|
142
|
+
*/
|
143
|
+
open(event?: KeyboardEvent | MouseEvent): void;
|
144
|
+
/**
|
145
|
+
* Closes the options list.
|
146
|
+
*/
|
147
|
+
close(event?: KeyboardEvent | MouseEvent): void;
|
148
|
+
/**
|
149
|
+
* Selects the value in a particular position in the options list.
|
150
|
+
*/
|
151
|
+
private selectValueInPosition;
|
152
|
+
/**
|
153
|
+
* Selects an option.
|
154
|
+
*/
|
155
|
+
selectOption(option: T): void;
|
156
|
+
/**
|
157
|
+
* Selects the option referenced by the highlighted index.
|
158
|
+
*/
|
159
|
+
selectHighlighted(event?: KeyboardEvent | MouseEvent): void;
|
160
|
+
/**
|
161
|
+
* Highlights the next option in the list.
|
162
|
+
*/
|
163
|
+
highlightNext(event?: KeyboardEvent | MouseEvent): void;
|
164
|
+
/**
|
165
|
+
* Highlights the previous option in the list.
|
166
|
+
*/
|
167
|
+
highlightPrevious(event?: KeyboardEvent | MouseEvent): void;
|
168
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DaffSelectComponent<any>, [null, null, { optional: true; self: true; }, null, null, null]>;
|
169
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DaffSelectComponent<any>, "daff-select", never, { "disabled": { "alias": "disabled"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionsId": { "alias": "optionsId"; "required": false; }; }, {}, ["optionTemplate"], never, true, [{ directive: typeof i1.DaffOpenableDirective; inputs: {}; outputs: {}; }]>;
|
170
|
+
}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
import { DaffErrorMessageComponent, DaffFormLabelDirective } from '@daffodil/design';
|
2
|
+
import { DaffSelectOptionDirective } from './option/option.directive';
|
3
|
+
import { DaffSelectComponent } from './select/select.component';
|
4
|
+
export declare const DAFF_SELECT_COMPONENTS: readonly [typeof DaffSelectComponent, typeof DaffSelectOptionDirective, typeof DaffErrorMessageComponent, typeof DaffFormLabelDirective];
|