@bravura/ui 9.0.4 → 9.0.5
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/CHANGELOG.md +5 -1
- package/_index.scss +6 -5
- package/fesm2022/bravura-ui-form-field.mjs +13 -10
- package/fesm2022/bravura-ui-form-field.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +112 -0
- package/package.json +1 -1
- package/theme/_ui-theme.scss +102 -101
- package/types/bravura-ui-form-field.d.ts +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
# Change history
|
|
2
2
|
|
|
3
|
+
## <small>9.0.5 (2026-07-15)</small>
|
|
4
|
+
|
|
5
|
+
* fix(form-field): export styles ([d00217b](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/d00217b))
|
|
6
|
+
|
|
3
7
|
## <small>9.0.4 (2026-07-15)</small>
|
|
4
8
|
|
|
5
|
-
|
|
9
|
+
- fix(decimal-input): allow decimal input used as attribute ([0fc85fe](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/0fc85fe))
|
|
6
10
|
|
|
7
11
|
## <small>9.0.3 (2026-07-14)</small>
|
|
8
12
|
|
package/_index.scss
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
@forward './theme/ui-theme' show theme, all-component-colors;
|
|
2
|
-
@forward './stepper/stepper-theme' as stepper-* show stepper-color, stepper-theme;
|
|
3
|
-
@forward './radio-panel/radio-panel-theme' as radio-panel-* show radio-panel-color, radio-panel-theme;
|
|
4
|
-
@forward './selection-panel/selection-panel-theme' as selection-panel-* show selection-panel-color,
|
|
5
|
-
selection-panel-theme;
|
|
1
|
+
@forward './theme/ui-theme' show theme, all-component-colors;
|
|
2
|
+
@forward './stepper/stepper-theme' as stepper-* show stepper-color, stepper-theme;
|
|
3
|
+
@forward './radio-panel/radio-panel-theme' as radio-panel-* show radio-panel-color, radio-panel-theme;
|
|
4
|
+
@forward './selection-panel/selection-panel-theme' as selection-panel-* show selection-panel-color,
|
|
5
|
+
selection-panel-theme;
|
|
6
|
+
@forward './form-field/form-field-theme';
|
|
@@ -24,11 +24,16 @@ const BUI_FORM_FIELD_CONFIG = new InjectionToken('@bravura/ui/buiFormFieldConfig
|
|
|
24
24
|
*/
|
|
25
25
|
class FormFieldComponent extends MatFormField {
|
|
26
26
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: FormFieldComponent, isStandalone:
|
|
27
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: FormFieldComponent, isStandalone: true, selector: "bui-dummy-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
28
28
|
}
|
|
29
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
|
-
args: [{
|
|
31
|
+
args: [{
|
|
32
|
+
selector: 'bui-dummy-component',
|
|
33
|
+
template: ``,
|
|
34
|
+
encapsulation: ViewEncapsulation.None,
|
|
35
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
36
|
+
}]
|
|
32
37
|
}] });
|
|
33
38
|
/**
|
|
34
39
|
* @ignore
|
|
@@ -58,7 +63,7 @@ class FormFieldStyleDirective {
|
|
|
58
63
|
this.appearance = config.appearance;
|
|
59
64
|
}
|
|
60
65
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldStyleDirective, deps: [{ token: i1.MatFormField, host: true }, { token: i0.ElementRef }, { token: BUI_FORM_FIELD_CONFIG }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
61
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: FormFieldStyleDirective, isStandalone:
|
|
66
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: FormFieldStyleDirective, isStandalone: true, selector: "bui-form-field, mat-form-field", inputs: { appearance: "appearance" }, host: { classAttribute: "bui-host" }, ngImport: i0 }); }
|
|
62
67
|
}
|
|
63
68
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldStyleDirective, decorators: [{
|
|
64
69
|
type: Directive,
|
|
@@ -66,8 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
66
71
|
selector: 'bui-form-field, mat-form-field',
|
|
67
72
|
host: {
|
|
68
73
|
class: 'bui-host'
|
|
69
|
-
}
|
|
70
|
-
standalone: false
|
|
74
|
+
}
|
|
71
75
|
}]
|
|
72
76
|
}], ctorParameters: () => [{ type: i1.MatFormField, decorators: [{
|
|
73
77
|
type: Host
|
|
@@ -99,15 +103,14 @@ class FormFieldModule {
|
|
|
99
103
|
};
|
|
100
104
|
}
|
|
101
105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
102
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule,
|
|
103
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, imports: [CommonModule, MatFormFieldModule, ObserversModule
|
|
106
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, imports: [CommonModule, MatFormFieldModule, ObserversModule, FormFieldComponent, FormFieldStyleDirective], exports: [FormFieldComponent, FormFieldStyleDirective] }); }
|
|
107
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, imports: [CommonModule, MatFormFieldModule, ObserversModule] }); }
|
|
104
108
|
}
|
|
105
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, decorators: [{
|
|
106
110
|
type: NgModule,
|
|
107
111
|
args: [{
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
exports: [FormFieldComponent, FormFieldStyleDirective, MatFormFieldModule]
|
|
112
|
+
imports: [CommonModule, MatFormFieldModule, ObserversModule, FormFieldComponent, FormFieldStyleDirective],
|
|
113
|
+
exports: [FormFieldComponent, FormFieldStyleDirective]
|
|
111
114
|
}]
|
|
112
115
|
}] });
|
|
113
116
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bravura-ui-form-field.mjs","sources":["../../../projects/ui/form-field/form-field.component.ts","../../../projects/ui/form-field/form-field.module.ts","../../../projects/ui/form-field/bravura-ui-form-field.ts"],"sourcesContent":["import {\
|
|
1
|
+
{"version":3,"file":"bravura-ui-form-field.mjs","sources":["../../../projects/ui/form-field/form-field.component.ts","../../../projects/ui/form-field/form-field.module.ts","../../../projects/ui/form-field/bravura-ui-form-field.ts"],"sourcesContent":["import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tDirective,\n\tElementRef,\n\tHost,\n\tInject,\n\tInjectionToken,\n\tInput,\n\tViewEncapsulation\n} from '@angular/core';\nimport { MatFormField } from '@angular/material/form-field';\n\nexport interface BuiFormFieldConfig {\n\tappearance?: 'fill' | 'outline' | 'bound';\n}\n\nexport const BUI_FORM_FIELD_CONFIG = new InjectionToken<BuiFormFieldConfig>('@bravura/ui/buiFormFieldConfig', {\n\tfactory: () => ({ appearance: 'fill' }),\n\tprovidedIn: 'root'\n});\n/**\n * Container for form controls that applies Material Design styling and behavior.\n *\n * This component extends Angular Material's [mat-form-field](https://material.angular.io/components/form-field) and provides two additional appearances\n * `bound` and `detach`. `bound` renders the label outside the outlined area of the field, while `detach` remove the borders all together. `detach`\n * is generally used with form controls that render their own borders.\n *\n * ** IMPORTANT NOTICE **\n *\n * From version 3.0 onward, the selector `bui-form-field` is deprecated and will be removed in later releases. You no longer need to use this tag name\n * for the new appearances. As long as you import the `NgModule` from this package, the new appearances will be supported by Material's `mat-form-field`\n * component.\n */\n@Component({\n\tselector: 'bui-dummy-component',\n\ttemplate: ``,\n\tencapsulation: ViewEncapsulation.None,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class FormFieldComponent extends MatFormField {}\n\n/**\n * @ignore\n */\n@Directive({\n\tselector: 'bui-form-field, mat-form-field',\n\thost: {\n\t\tclass: 'bui-host'\n\t}\n})\nexport class FormFieldStyleDirective {\n\tprivate _appearance: any;\n\tprivate _flowDetection: any;\n\n\t/** The form field appearance style. */\n\t@Input()\n\tget appearance(): any {\n\t\treturn this._appearance;\n\t}\n\tset appearance(value: any) {\n\t\tthis._appearance = value;\n\t\tthis.elemRef.nativeElement.classList.remove('bui-form-field-bound', 'bui-form-field-detach');\n\t\tif (['bound', 'detach'].includes(this._appearance)) {\n\t\t\tthis.matFormField.appearance = 'outline';\n\t\t\tthis.elemRef.nativeElement.classList.add(`bui-form-field-${value}`);\n\t\t\tthis.matFormField._shouldAlwaysFloat = () => true;\n\t\t} else {\n\t\t\tthis.matFormField.appearance = ['outline', 'fill'].includes(this._appearance) ? this._appearance : undefined;\n\t\t\tthis.matFormField._shouldAlwaysFloat = this._flowDetection;\n\t\t}\n\t}\n\n\tconstructor(\n\t\t@Host() private matFormField: MatFormField,\n\t\tprivate elemRef: ElementRef<HTMLElement>,\n\t\t@Inject(BUI_FORM_FIELD_CONFIG) config: BuiFormFieldConfig\n\t) {\n\t\tthis._flowDetection = matFormField._shouldAlwaysFloat;\n\t\tthis.appearance = config.appearance;\n\t}\n}\n\nconst matFormFieldRef: any = MatFormField.ɵcmp;\nconst formFieldRef: any = FormFieldComponent.ɵcmp;\n\nmatFormFieldRef.styles.push(...formFieldRef.styles);\nmatFormFieldRef.selectors.push(['bui-form-field']);\ndelete matFormFieldRef.inputs.appearance;\ndelete matFormFieldRef.declaredInputs.appearance;\n","import { ObserversModule } from '@angular/cdk/observers';\nimport { CommonModule } from '@angular/common';\nimport { ModuleWithProviders, NgModule } from '@angular/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n\tBuiFormFieldConfig,\n\tBUI_FORM_FIELD_CONFIG,\n\tFormFieldComponent,\n\tFormFieldStyleDirective\n} from './form-field.component';\n\n@NgModule({\n\timports: [CommonModule, MatFormFieldModule, ObserversModule, FormFieldComponent, FormFieldStyleDirective],\n\texports: [FormFieldComponent, FormFieldStyleDirective]\n})\nexport class FormFieldModule {\n\tstatic forConfig(config: BuiFormFieldConfig): ModuleWithProviders<FormFieldModule> {\n\t\tconst cfg = { ...config };\n\t\tcfg.appearance = cfg.appearance || 'fill';\n\t\treturn {\n\t\t\tngModule: FormFieldModule,\n\t\t\tproviders: [\n\t\t\t\t{\n\t\t\t\t\tprovide: BUI_FORM_FIELD_CONFIG,\n\t\t\t\t\tuseValue: cfg\n\t\t\t\t}\n\t\t\t]\n\t\t};\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
$offset: -3.3rem;
|
|
2
|
+
|
|
3
|
+
.bui-form-field-bound,
|
|
4
|
+
.bui-form-field-detach {
|
|
5
|
+
padding-top: 24px;
|
|
6
|
+
|
|
7
|
+
--mat-mdc-form-field-floating-label-scale: 1 !important;
|
|
8
|
+
--mat-mdc-form-field-floating-label-translate-y: #{$offset};
|
|
9
|
+
|
|
10
|
+
.mdc-floating-label {
|
|
11
|
+
--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y))
|
|
12
|
+
translateX(-4px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75)) !important;
|
|
13
|
+
[dir='rtl'] & {
|
|
14
|
+
--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y))
|
|
15
|
+
translateX(4px) scale(var(--mat-mdc-form-field-floating-label-scale, 0.75)) !important;
|
|
16
|
+
}
|
|
17
|
+
transition: none !important;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
align-self: stretch;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.bui-form-field-bound {
|
|
29
|
+
&.mat-focused {
|
|
30
|
+
--mat-mdc-form-field-floating-label-translate-y: calc(#{$offset} - 1px);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.mat-mdc-form-field-hint-wrapper,
|
|
34
|
+
.mat-mdc-form-field-error-wrapper {
|
|
35
|
+
padding-left: initial;
|
|
36
|
+
padding-inline-start: 4px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.mat-mdc-form-field-infix {
|
|
40
|
+
min-height: 48px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
|
|
44
|
+
padding-top: 8px;
|
|
45
|
+
padding-bottom: 8px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
|
|
49
|
+
width: 4px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.mdc-notched-outline--notched .mdc-notched-outline__notch {
|
|
53
|
+
border-top-width: 1px;
|
|
54
|
+
border-top-style: solid;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.mdc-text-field--focused .mdc-notched-outline--notched .mdc-notched-outline__notch {
|
|
58
|
+
border-top-width: 2px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.mat-mdc-form-field-icon-prefix {
|
|
62
|
+
& > .mat-icon {
|
|
63
|
+
padding: 0 6px 0 12px;
|
|
64
|
+
}
|
|
65
|
+
& > span,
|
|
66
|
+
& > div {
|
|
67
|
+
padding-inline-start: 6px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mat-mdc-form-field-icon-suffix {
|
|
72
|
+
& > .mat-icon {
|
|
73
|
+
padding: 0 12px 0 6px;
|
|
74
|
+
}
|
|
75
|
+
& > span,
|
|
76
|
+
& > div {
|
|
77
|
+
padding-inline-end: 6px;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.bui-form-field-detach {
|
|
83
|
+
.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
|
|
84
|
+
padding-top: 0px;
|
|
85
|
+
padding-bottom: 0px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.mat-mdc-form-field-hint-wrapper,
|
|
89
|
+
.mat-mdc-form-field-error-wrapper {
|
|
90
|
+
padding-inline-start: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.mat-mdc-form-field-infix {
|
|
94
|
+
min-height: 40px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.mdc-text-field--outlined .mdc-notched-outline {
|
|
98
|
+
.mdc-notched-outline__leading,
|
|
99
|
+
.mdc-notched-outline__trailing,
|
|
100
|
+
.mdc-notched-outline__notch {
|
|
101
|
+
border: none !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.mdc-notched-outline__leading {
|
|
105
|
+
width: 0;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.mat-mdc-text-field-wrapper.mdc-text-field--outlined {
|
|
110
|
+
padding-inline-start: 0;
|
|
111
|
+
}
|
|
112
|
+
}
|
package/package.json
CHANGED
package/theme/_ui-theme.scss
CHANGED
|
@@ -1,101 +1,102 @@
|
|
|
1
|
-
@use 'sass:map';
|
|
2
|
-
@use '@angular/material' as mat;
|
|
3
|
-
@use './scrollbar.scss' as scrollbar;
|
|
4
|
-
@use './bui-card' as card;
|
|
5
|
-
@use './ui-theme-legacy' as legacy;
|
|
6
|
-
@use '../stepper/stepper-theme' as stepper;
|
|
7
|
-
@use '../radio-panel/radio-panel-theme' as radio;
|
|
8
|
-
@use '../selection-panel/selection-panel-theme' as selection;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
$
|
|
12
|
-
|
|
13
|
-
'
|
|
14
|
-
'
|
|
15
|
-
'
|
|
16
|
-
'
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
'
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
@include
|
|
28
|
-
@include
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
@
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
--bui-color-
|
|
50
|
-
--bui-color-
|
|
51
|
-
--bui-color-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
@include
|
|
83
|
-
@include
|
|
84
|
-
@include
|
|
85
|
-
@include
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
&.
|
|
90
|
-
&.
|
|
91
|
-
&.
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '@angular/material' as mat;
|
|
3
|
+
@use './scrollbar.scss' as scrollbar;
|
|
4
|
+
@use './bui-card' as card;
|
|
5
|
+
@use './ui-theme-legacy' as legacy;
|
|
6
|
+
@use '../stepper/stepper-theme' as stepper;
|
|
7
|
+
@use '../radio-panel/radio-panel-theme' as radio;
|
|
8
|
+
@use '../selection-panel/selection-panel-theme' as selection;
|
|
9
|
+
@use '../form-field/form-field-theme';
|
|
10
|
+
|
|
11
|
+
$default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
|
|
12
|
+
$mat-foreground-extract: (
|
|
13
|
+
'secondary-text': 'light',
|
|
14
|
+
'hint-text': 'muted',
|
|
15
|
+
'divider': 'divider',
|
|
16
|
+
'base': 'base',
|
|
17
|
+
'inactive': 'inactive'
|
|
18
|
+
);
|
|
19
|
+
|
|
20
|
+
$mat-background-extract: (
|
|
21
|
+
'card': 'card',
|
|
22
|
+
'background': 'body'
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
@mixin all-component-colors($theme, $border-color-transition: $default-border-color-transition) {
|
|
26
|
+
@if (mat.get-theme-version($theme) == 1) {
|
|
27
|
+
@include stepper.color($theme);
|
|
28
|
+
@include radio.color($theme);
|
|
29
|
+
@include selection.color($theme);
|
|
30
|
+
|
|
31
|
+
.bui-border-emphasis:hover {
|
|
32
|
+
border-color: currentColor !important;
|
|
33
|
+
transition: $border-color-transition;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// @include card.bui-card($color-config);
|
|
37
|
+
@each $p in (primary, tertiary, secondary, error) {
|
|
38
|
+
$c: mat.get-theme-color($theme, $p);
|
|
39
|
+
@include apply-color($p, $c, $border-color-transition);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.bui-host {
|
|
43
|
+
@each $p in (primary, tertiary, secondary, error) {
|
|
44
|
+
$c: mat.get-theme-color($theme, $p);
|
|
45
|
+
--bui-color-#{$p}: #{$c};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
@if mat.get-theme-type($theme) != dark {
|
|
49
|
+
--bui-color-success: #519602;
|
|
50
|
+
--bui-color-info: #0dcaf0;
|
|
51
|
+
--bui-color-warning: #ffc107;
|
|
52
|
+
--bui-color-error: #dc3545;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
} @else {
|
|
56
|
+
@include legacy.apply-colors($theme);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@mixin apply-color($name, $color, $border-color-transition: $default-border-color-transition) {
|
|
61
|
+
.bui-border-#{$name} {
|
|
62
|
+
border-color: $color !important;
|
|
63
|
+
transition: $border-color-transition;
|
|
64
|
+
}
|
|
65
|
+
.bui-bg-#{$name} {
|
|
66
|
+
background-color: $color !important;
|
|
67
|
+
}
|
|
68
|
+
.bui-color-#{$name} {
|
|
69
|
+
color: $color !important;
|
|
70
|
+
}
|
|
71
|
+
.bui-outline-#{$name} {
|
|
72
|
+
outline-color: $color !important;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@mixin apply-colors($theme, $border-color-transition: $default-border-color-transition) {
|
|
77
|
+
@include all-component-colors($theme, $border-color-transition);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
|
|
81
|
+
@if (mat.get-theme-version($theme) == 1) {
|
|
82
|
+
@include apply-colors($theme, $border-color-transition);
|
|
83
|
+
@include stepper.theme($theme);
|
|
84
|
+
@include radio.theme($theme);
|
|
85
|
+
@include selection.theme($theme);
|
|
86
|
+
@include scrollbar.bui-scrollbar;
|
|
87
|
+
|
|
88
|
+
.mat-icon {
|
|
89
|
+
&.fas,
|
|
90
|
+
&.far,
|
|
91
|
+
&.fab,
|
|
92
|
+
&.fa {
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
align-items: center;
|
|
96
|
+
font-size: 20px;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
} @else {
|
|
100
|
+
@include legacy.theme($theme);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { ElementRef, ModuleWithProviders } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i2 from '@angular/material/form-field';
|
|
4
4
|
import { MatFormField } from '@angular/material/form-field';
|
|
5
|
-
import * as
|
|
6
|
-
import * as
|
|
5
|
+
import * as i1 from '@angular/common';
|
|
6
|
+
import * as i3 from '@angular/cdk/observers';
|
|
7
7
|
|
|
8
8
|
interface BuiFormFieldConfig {
|
|
9
9
|
appearance?: 'fill' | 'outline' | 'bound';
|
|
@@ -23,7 +23,7 @@ interface BuiFormFieldConfig {
|
|
|
23
23
|
*/
|
|
24
24
|
declare class FormFieldComponent extends MatFormField {
|
|
25
25
|
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
|
|
26
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "bui-dummy-component", never, {}, {}, never, never,
|
|
26
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "bui-dummy-component", never, {}, {}, never, never, true, never>;
|
|
27
27
|
}
|
|
28
28
|
/**
|
|
29
29
|
* @ignore
|
|
@@ -38,13 +38,13 @@ declare class FormFieldStyleDirective {
|
|
|
38
38
|
set appearance(value: any);
|
|
39
39
|
constructor(matFormField: MatFormField, elemRef: ElementRef<HTMLElement>, config: BuiFormFieldConfig);
|
|
40
40
|
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldStyleDirective, [{ host: true; }, null, null]>;
|
|
41
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<FormFieldStyleDirective, "bui-form-field, mat-form-field", never, { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, never,
|
|
41
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<FormFieldStyleDirective, "bui-form-field, mat-form-field", never, { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, never, true, never>;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
declare class FormFieldModule {
|
|
45
45
|
static forConfig(config: BuiFormFieldConfig): ModuleWithProviders<FormFieldModule>;
|
|
46
46
|
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldModule, never>;
|
|
47
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<FormFieldModule,
|
|
47
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<FormFieldModule, never, [typeof i1.CommonModule, typeof i2.MatFormFieldModule, typeof i3.ObserversModule, typeof FormFieldComponent, typeof FormFieldStyleDirective], [typeof FormFieldComponent, typeof FormFieldStyleDirective]>;
|
|
48
48
|
static ɵinj: i0.ɵɵInjectorDeclaration<FormFieldModule>;
|
|
49
49
|
}
|
|
50
50
|
|