@bravura/ui 9.0.4 → 9.0.6
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 +9 -1
- package/_index.scss +6 -5
- package/fesm2022/bravura-ui-form-field.mjs +16 -33
- 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 +7 -24
package/CHANGELOG.md
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
1
|
# Change history
|
|
2
2
|
|
|
3
|
+
## <small>9.0.6 (2026-07-15)</small>
|
|
4
|
+
|
|
5
|
+
* fix(form-field): export as standalone ([a058e55](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/a058e55))
|
|
6
|
+
|
|
7
|
+
## <small>9.0.5 (2026-07-15)</small>
|
|
8
|
+
|
|
9
|
+
- fix(form-field): export styles ([d00217b](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/d00217b))
|
|
10
|
+
|
|
3
11
|
## <small>9.0.4 (2026-07-15)</small>
|
|
4
12
|
|
|
5
|
-
|
|
13
|
+
- fix(decimal-input): allow decimal input used as attribute ([0fc85fe](https://scm.bravurasolutions.net/projects/DIGI/repos/ui-components/commits/0fc85fe))
|
|
6
14
|
|
|
7
15
|
## <small>9.0.3 (2026-07-14)</small>
|
|
8
16
|
|
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';
|
|
@@ -1,35 +1,22 @@
|
|
|
1
1
|
import { ObserversModule } from '@angular/cdk/observers';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { InjectionToken,
|
|
4
|
+
import { InjectionToken, Input, Host, Inject, Directive, NgModule } from '@angular/core';
|
|
5
5
|
import * as i1 from '@angular/material/form-field';
|
|
6
|
-
import { MatFormField
|
|
6
|
+
import { MatFormField } from '@angular/material/form-field';
|
|
7
7
|
|
|
8
8
|
const BUI_FORM_FIELD_CONFIG = new InjectionToken('@bravura/ui/buiFormFieldConfig', {
|
|
9
9
|
factory: () => ({ appearance: 'fill' }),
|
|
10
10
|
providedIn: 'root'
|
|
11
11
|
});
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
* ** IMPORTANT NOTICE **
|
|
20
|
-
*
|
|
21
|
-
* 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
|
|
22
|
-
* 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`
|
|
23
|
-
* component.
|
|
24
|
-
*/
|
|
25
|
-
class FormFieldComponent extends MatFormField {
|
|
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: false, selector: "bui-dummy-component", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [".bui-form-field-bound,.bui-form-field-detach{padding-top:24px;--mat-mdc-form-field-floating-label-scale: 1 !important;--mat-mdc-form-field-floating-label-translate-y: -3.3rem}.bui-form-field-bound .mdc-floating-label,.bui-form-field-detach .mdc-floating-label{--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y)) translateX(-4px) scale(var(--mat-mdc-form-field-floating-label-scale, .75)) !important}[dir=rtl] .bui-form-field-bound .mdc-floating-label,[dir=rtl] .bui-form-field-detach .mdc-floating-label{--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y)) translateX(4px) scale(var(--mat-mdc-form-field-floating-label-scale, .75)) !important}.bui-form-field-bound .mdc-floating-label,.bui-form-field-detach .mdc-floating-label{transition:none!important}.bui-form-field-bound .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix,.bui-form-field-detach .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center;align-self:stretch}.bui-form-field-bound.mat-focused{--mat-mdc-form-field-floating-label-translate-y: calc(-3.3rem - 1px) }.bui-form-field-bound .mat-mdc-form-field-hint-wrapper,.bui-form-field-bound .mat-mdc-form-field-error-wrapper{padding-left:initial;padding-inline-start:4px}.bui-form-field-bound .mat-mdc-form-field-infix{min-height:48px}.bui-form-field-bound .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.bui-form-field-bound .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:4px}.bui-form-field-bound .mdc-notched-outline--notched .mdc-notched-outline__notch{border-top-width:1px;border-top-style:solid}.bui-form-field-bound .mdc-text-field--focused .mdc-notched-outline--notched .mdc-notched-outline__notch{border-top-width:2px}.bui-form-field-bound .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 6px 0 12px}.bui-form-field-bound .mat-mdc-form-field-icon-prefix>span,.bui-form-field-bound .mat-mdc-form-field-icon-prefix>div{padding-inline-start:6px}.bui-form-field-bound .mat-mdc-form-field-icon-suffix>.mat-icon{padding:0 12px 0 6px}.bui-form-field-bound .mat-mdc-form-field-icon-suffix>span,.bui-form-field-bound .mat-mdc-form-field-icon-suffix>div{padding-inline-end:6px}.bui-form-field-detach .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0}.bui-form-field-detach .mat-mdc-form-field-hint-wrapper,.bui-form-field-detach .mat-mdc-form-field-error-wrapper{padding-inline-start:0}.bui-form-field-detach .mat-mdc-form-field-infix{min-height:40px}.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{border:none!important}.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:0}.bui-form-field-detach .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-inline-start:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12
|
+
function provideFormFieldConfig(config) {
|
|
13
|
+
const conf = { ...config };
|
|
14
|
+
conf.appearance = conf.appearance || 'fill';
|
|
15
|
+
return {
|
|
16
|
+
provide: BUI_FORM_FIELD_CONFIG,
|
|
17
|
+
useValue: conf
|
|
18
|
+
};
|
|
28
19
|
}
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
30
|
-
type: Component,
|
|
31
|
-
args: [{ selector: 'bui-dummy-component', template: ``, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [".bui-form-field-bound,.bui-form-field-detach{padding-top:24px;--mat-mdc-form-field-floating-label-scale: 1 !important;--mat-mdc-form-field-floating-label-translate-y: -3.3rem}.bui-form-field-bound .mdc-floating-label,.bui-form-field-detach .mdc-floating-label{--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y)) translateX(-4px) scale(var(--mat-mdc-form-field-floating-label-scale, .75)) !important}[dir=rtl] .bui-form-field-bound .mdc-floating-label,[dir=rtl] .bui-form-field-detach .mdc-floating-label{--mat-mdc-form-field-label-transform: translateY(var(--mat-mdc-form-field-floating-label-translate-y)) translateX(4px) scale(var(--mat-mdc-form-field-floating-label-scale, .75)) !important}.bui-form-field-bound .mdc-floating-label,.bui-form-field-detach .mdc-floating-label{transition:none!important}.bui-form-field-bound .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix,.bui-form-field-detach .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{display:flex;flex-direction:column;justify-content:center;align-self:stretch}.bui-form-field-bound.mat-focused{--mat-mdc-form-field-floating-label-translate-y: calc(-3.3rem - 1px) }.bui-form-field-bound .mat-mdc-form-field-hint-wrapper,.bui-form-field-bound .mat-mdc-form-field-error-wrapper{padding-left:initial;padding-inline-start:4px}.bui-form-field-bound .mat-mdc-form-field-infix{min-height:48px}.bui-form-field-bound .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px}.bui-form-field-bound .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:4px}.bui-form-field-bound .mdc-notched-outline--notched .mdc-notched-outline__notch{border-top-width:1px;border-top-style:solid}.bui-form-field-bound .mdc-text-field--focused .mdc-notched-outline--notched .mdc-notched-outline__notch{border-top-width:2px}.bui-form-field-bound .mat-mdc-form-field-icon-prefix>.mat-icon{padding:0 6px 0 12px}.bui-form-field-bound .mat-mdc-form-field-icon-prefix>span,.bui-form-field-bound .mat-mdc-form-field-icon-prefix>div{padding-inline-start:6px}.bui-form-field-bound .mat-mdc-form-field-icon-suffix>.mat-icon{padding:0 12px 0 6px}.bui-form-field-bound .mat-mdc-form-field-icon-suffix>span,.bui-form-field-bound .mat-mdc-form-field-icon-suffix>div{padding-inline-end:6px}.bui-form-field-detach .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0;padding-bottom:0}.bui-form-field-detach .mat-mdc-form-field-hint-wrapper,.bui-form-field-detach .mat-mdc-form-field-error-wrapper{padding-inline-start:0}.bui-form-field-detach .mat-mdc-form-field-infix{min-height:40px}.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{border:none!important}.bui-form-field-detach .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:0}.bui-form-field-detach .mat-mdc-text-field-wrapper.mdc-text-field--outlined{padding-inline-start:0}\n"] }]
|
|
32
|
-
}] });
|
|
33
20
|
/**
|
|
34
21
|
* @ignore
|
|
35
22
|
*/
|
|
@@ -58,7 +45,7 @@ class FormFieldStyleDirective {
|
|
|
58
45
|
this.appearance = config.appearance;
|
|
59
46
|
}
|
|
60
47
|
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:
|
|
48
|
+
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
49
|
}
|
|
63
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldStyleDirective, decorators: [{
|
|
64
51
|
type: Directive,
|
|
@@ -66,8 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
66
53
|
selector: 'bui-form-field, mat-form-field',
|
|
67
54
|
host: {
|
|
68
55
|
class: 'bui-host'
|
|
69
|
-
}
|
|
70
|
-
standalone: false
|
|
56
|
+
}
|
|
71
57
|
}]
|
|
72
58
|
}], ctorParameters: () => [{ type: i1.MatFormField, decorators: [{
|
|
73
59
|
type: Host
|
|
@@ -78,8 +64,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
78
64
|
type: Input
|
|
79
65
|
}] } });
|
|
80
66
|
const matFormFieldRef = MatFormField.ɵcmp;
|
|
81
|
-
const formFieldRef = FormFieldComponent.ɵcmp;
|
|
82
|
-
matFormFieldRef.styles.push(...formFieldRef.styles);
|
|
83
67
|
matFormFieldRef.selectors.push(['bui-form-field']);
|
|
84
68
|
delete matFormFieldRef.inputs.appearance;
|
|
85
69
|
delete matFormFieldRef.declaredInputs.appearance;
|
|
@@ -99,15 +83,14 @@ class FormFieldModule {
|
|
|
99
83
|
};
|
|
100
84
|
}
|
|
101
85
|
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,
|
|
86
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, imports: [CommonModule, ObserversModule, FormFieldStyleDirective], exports: [FormFieldStyleDirective] }); }
|
|
87
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, imports: [CommonModule, ObserversModule] }); }
|
|
104
88
|
}
|
|
105
89
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FormFieldModule, decorators: [{
|
|
106
90
|
type: NgModule,
|
|
107
91
|
args: [{
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
exports: [FormFieldComponent, FormFieldStyleDirective, MatFormFieldModule]
|
|
92
|
+
imports: [CommonModule, ObserversModule, FormFieldStyleDirective],
|
|
93
|
+
exports: [FormFieldStyleDirective]
|
|
111
94
|
}]
|
|
112
95
|
}] });
|
|
113
96
|
|
|
@@ -115,5 +98,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
115
98
|
* Generated bundle index. Do not edit.
|
|
116
99
|
*/
|
|
117
100
|
|
|
118
|
-
export {
|
|
101
|
+
export { FormFieldModule, FormFieldStyleDirective, provideFormFieldConfig };
|
|
119
102
|
//# sourceMappingURL=bravura-ui-form-field.mjs.map
|
|
@@ -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 { Directive, ElementRef, Host, Inject, InjectionToken, Input, Provider } 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\nexport function provideFormFieldConfig(config: BuiFormFieldConfig): Provider {\n\tconst conf = { ...config };\n\tconf.appearance = conf.appearance || 'fill';\n\n\treturn {\n\t\tprovide: BUI_FORM_FIELD_CONFIG,\n\t\tuseValue: conf\n\t};\n}\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;\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 { BuiFormFieldConfig, BUI_FORM_FIELD_CONFIG, FormFieldStyleDirective } from './form-field.component';\n\n@NgModule({\n\timports: [CommonModule, ObserversModule, FormFieldStyleDirective],\n\texports: [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,30 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ElementRef, ModuleWithProviders } from '@angular/core';
|
|
3
|
-
import * as i3 from '@angular/material/form-field';
|
|
2
|
+
import { ElementRef, Provider, ModuleWithProviders } from '@angular/core';
|
|
4
3
|
import { MatFormField } from '@angular/material/form-field';
|
|
5
|
-
import * as
|
|
6
|
-
import * as
|
|
4
|
+
import * as i1 from '@angular/common';
|
|
5
|
+
import * as i2 from '@angular/cdk/observers';
|
|
7
6
|
|
|
8
7
|
interface BuiFormFieldConfig {
|
|
9
8
|
appearance?: 'fill' | 'outline' | 'bound';
|
|
10
9
|
}
|
|
11
|
-
|
|
12
|
-
* Container for form controls that applies Material Design styling and behavior.
|
|
13
|
-
*
|
|
14
|
-
* This component extends Angular Material's [mat-form-field](https://material.angular.io/components/form-field) and provides two additional appearances
|
|
15
|
-
* `bound` and `detach`. `bound` renders the label outside the outlined area of the field, while `detach` remove the borders all together. `detach`
|
|
16
|
-
* is generally used with form controls that render their own borders.
|
|
17
|
-
*
|
|
18
|
-
* ** IMPORTANT NOTICE **
|
|
19
|
-
*
|
|
20
|
-
* 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
|
|
21
|
-
* 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`
|
|
22
|
-
* component.
|
|
23
|
-
*/
|
|
24
|
-
declare class FormFieldComponent extends MatFormField {
|
|
25
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
|
|
26
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "bui-dummy-component", never, {}, {}, never, never, false, never>;
|
|
27
|
-
}
|
|
10
|
+
declare function provideFormFieldConfig(config: BuiFormFieldConfig): Provider;
|
|
28
11
|
/**
|
|
29
12
|
* @ignore
|
|
30
13
|
*/
|
|
@@ -38,14 +21,14 @@ declare class FormFieldStyleDirective {
|
|
|
38
21
|
set appearance(value: any);
|
|
39
22
|
constructor(matFormField: MatFormField, elemRef: ElementRef<HTMLElement>, config: BuiFormFieldConfig);
|
|
40
23
|
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,
|
|
24
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<FormFieldStyleDirective, "bui-form-field, mat-form-field", never, { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, never, true, never>;
|
|
42
25
|
}
|
|
43
26
|
|
|
44
27
|
declare class FormFieldModule {
|
|
45
28
|
static forConfig(config: BuiFormFieldConfig): ModuleWithProviders<FormFieldModule>;
|
|
46
29
|
static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldModule, never>;
|
|
47
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<FormFieldModule,
|
|
30
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<FormFieldModule, never, [typeof i1.CommonModule, typeof i2.ObserversModule, typeof FormFieldStyleDirective], [typeof FormFieldStyleDirective]>;
|
|
48
31
|
static ɵinj: i0.ɵɵInjectorDeclaration<FormFieldModule>;
|
|
49
32
|
}
|
|
50
33
|
|
|
51
|
-
export {
|
|
34
|
+
export { FormFieldModule, FormFieldStyleDirective, provideFormFieldConfig };
|