@elderbyte/ngx-starter 15.8.1 → 15.8.3
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/_index.scss +3 -0
- package/esm2020/lib/components/files/elder-file-drop-zone.directive.mjs +2 -19
- package/esm2020/lib/components/files/listing/file-listing-rx.mjs +16 -2
- package/esm2020/lib/components/forms/directives/elder-form-field-dense.directive.mjs +39 -4
- package/esm2020/lib/components/forms/search/search-box/elder-search-box.component.mjs +1 -1
- package/esm2020/lib/components/i18n/entities/elder-localized-input-table/elder-localized-input-table.component.mjs +1 -1
- package/esm2020/lib/components/navigation/bread-crumbs/bread-crumbs/elder-bread-crumbs.component.mjs +1 -1
- package/esm2020/lib/components/time/elder-date-switcher/elder-date-switcher.component.mjs +2 -2
- package/fesm2015/elderbyte-ngx-starter.mjs +58 -24
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +58 -24
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/lib/components/files/elder-file-drop-zone.directive.d.ts +0 -1
- package/lib/components/files/listing/file-listing-rx.d.ts +1 -0
- package/lib/components/forms/directives/elder-form-field-dense.directive.d.ts +27 -2
- package/package.json +1 -1
- package/theming/_elder-common.scss +21 -21
- package/theming/_elder-defaults.scss +28 -0
- package/theming/_elder-style-fixes.scss +48 -61
- package/theming/_mixins.scss +47 -0
|
@@ -34,7 +34,6 @@ export declare class ElderFileDropZoneDirective {
|
|
|
34
34
|
**************************************************************************/
|
|
35
35
|
private dragEnd;
|
|
36
36
|
private collectFilesAsync;
|
|
37
|
-
private toFileList;
|
|
38
37
|
static ɵfac: i0.ɵɵFactoryDeclaration<ElderFileDropZoneDirective, never>;
|
|
39
38
|
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderFileDropZoneDirective, "[elderFileDropZone]", never, { "dragOverClass": "dragOverClass"; }, { "elderFileDropZoneChange": "elderFileDropZoneChange"; }, never, never, false, never>;
|
|
40
39
|
}
|
|
@@ -7,6 +7,7 @@ export declare class FileListingRx {
|
|
|
7
7
|
* Public API *
|
|
8
8
|
* *
|
|
9
9
|
**************************************************************************/
|
|
10
|
+
toFileList(transferItemList: DataTransferItemList): Observable<FileEntry[]>;
|
|
10
11
|
listFilesRecursive(entry: FileSystemEntry): Observable<FileEntry[]>;
|
|
11
12
|
/***************************************************************************
|
|
12
13
|
* *
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AfterViewInit } from '@angular/core';
|
|
2
|
-
import { MatFormField } from '@angular/material/form-field';
|
|
2
|
+
import { FloatLabelType, MatFormField, SubscriptSizing } from '@angular/material/form-field';
|
|
3
3
|
import { BooleanInput } from '@angular/cdk/coercion';
|
|
4
4
|
import { ElderClassHostBindingBase } from './base/elder-class-hostbinding-base';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
@@ -16,14 +16,39 @@ import * as i0 from "@angular/core";
|
|
|
16
16
|
*/
|
|
17
17
|
export declare class ElderFormFieldDenseDirective extends ElderClassHostBindingBase implements AfterViewInit {
|
|
18
18
|
private _matFormField;
|
|
19
|
+
/***************************************************************************
|
|
20
|
+
* *
|
|
21
|
+
* Fields *
|
|
22
|
+
* *
|
|
23
|
+
**************************************************************************/
|
|
24
|
+
private _subscriptSizing;
|
|
25
|
+
private _floatLabel;
|
|
26
|
+
/***************************************************************************
|
|
27
|
+
* *
|
|
28
|
+
* Constructor *
|
|
29
|
+
* *
|
|
30
|
+
**************************************************************************/
|
|
19
31
|
constructor(_matFormField: MatFormField);
|
|
32
|
+
/***************************************************************************
|
|
33
|
+
* *
|
|
34
|
+
* Properties *
|
|
35
|
+
* *
|
|
36
|
+
**************************************************************************/
|
|
20
37
|
set elderDense(enabled: BooleanInput);
|
|
38
|
+
set subscriptSizing(sizing: SubscriptSizing);
|
|
39
|
+
set floatLabel(sizing: FloatLabelType);
|
|
21
40
|
/***************************************************************************
|
|
22
41
|
* *
|
|
23
42
|
* Life Cycle *
|
|
24
43
|
* *
|
|
25
44
|
**************************************************************************/
|
|
26
45
|
ngAfterViewInit(): void;
|
|
46
|
+
/***************************************************************************
|
|
47
|
+
* *
|
|
48
|
+
* Private methods *
|
|
49
|
+
* *
|
|
50
|
+
**************************************************************************/
|
|
51
|
+
private applyFormFieldConfig;
|
|
27
52
|
static ɵfac: i0.ɵɵFactoryDeclaration<ElderFormFieldDenseDirective, never>;
|
|
28
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderFormFieldDenseDirective, "mat-form-field[elderDense]", never, { "elderDense": "elderDense"; }, {}, never, never, false, never>;
|
|
53
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ElderFormFieldDenseDirective, "mat-form-field[elderDense]", never, { "elderDense": "elderDense"; "subscriptSizing": "subscriptSizing"; "floatLabel": "floatLabel"; }, {}, never, never, false, never>;
|
|
29
54
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@use 'mat-icon-button-size' as icon-button-size;
|
|
2
2
|
@use '@angular/material' as mat;
|
|
3
|
-
|
|
3
|
+
@use 'mixins' as mixins;
|
|
4
4
|
@mixin elder-common-styles ($theme, $common-sizes) {
|
|
5
5
|
|
|
6
6
|
$form-field-density: map-get($theme, elder, density, form-field);
|
|
@@ -88,10 +88,8 @@
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
/***************************************************************************
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
* *
|
|
94
|
-
**************************************************************************/
|
|
91
|
+
Form field dense styling
|
|
92
|
+
**************************************************************************/
|
|
95
93
|
|
|
96
94
|
.mat-mdc-form-field.elder-dense {
|
|
97
95
|
|
|
@@ -123,22 +121,24 @@
|
|
|
123
121
|
}
|
|
124
122
|
}
|
|
125
123
|
|
|
126
|
-
.
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
124
|
+
@include mixins.form-field-icons(-4);
|
|
125
|
+
|
|
126
|
+
//.mat-mdc-icon-button {
|
|
127
|
+
// // @include icon-button-size.matIconButtonSize(40,24);
|
|
128
|
+
// width: 40px !important;
|
|
129
|
+
// height: 40px !important;
|
|
130
|
+
//
|
|
131
|
+
// padding: 0px !important;
|
|
132
|
+
// display: inline-flex !important;
|
|
133
|
+
// align-items: center;
|
|
134
|
+
// justify-content: center;
|
|
135
|
+
//
|
|
136
|
+
//
|
|
137
|
+
// .mat-mdc-button-touch-target {
|
|
138
|
+
// width: 40px !important;
|
|
139
|
+
// height: 40px !important;
|
|
140
|
+
// }
|
|
141
|
+
//}
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
.mat-mdc-form-field.elder-no-hint {
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
/******************************
|
|
4
|
+
Default values
|
|
5
|
+
*******************************/
|
|
6
|
+
$densityFormField: 0;
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
/******************************
|
|
10
|
+
Validates $theme and sets default value if null
|
|
11
|
+
*******************************/
|
|
12
|
+
@function validate-and-set-defaults($theme) {
|
|
13
|
+
$elderMap: (
|
|
14
|
+
density: (
|
|
15
|
+
form-field: get-or-default($theme, $densityFormField, density, form-field)
|
|
16
|
+
)
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
@return map.set($theme, elder, $elderMap);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@function get-or-default($theme, $defaultValue, $keys...) {
|
|
23
|
+
@if map.has-key($theme, elder, $keys...) {
|
|
24
|
+
@return map.get($theme, elder, $keys...);
|
|
25
|
+
} @else {
|
|
26
|
+
@return $defaultValue;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -1,34 +1,11 @@
|
|
|
1
1
|
@use '@angular/material' as mat;
|
|
2
|
-
|
|
2
|
+
@use 'mixins' as mixins;
|
|
3
3
|
|
|
4
4
|
@mixin elder-style-fixes($theme) {
|
|
5
5
|
@include _ng-style-fixes;
|
|
6
6
|
@include _mat-style-fixes($theme);
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
@function calc-form-icon-padding($theme) {
|
|
10
|
-
$density: map-get($theme, elder, density, form-field);
|
|
11
|
-
@return calc(12px + #{$density}px * 2);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@function calc-form-icon-size($theme) {
|
|
15
|
-
$density: map-get($theme, elder, density, form-field);
|
|
16
|
-
|
|
17
|
-
@if $density > -3 {
|
|
18
|
-
@return 48px;
|
|
19
|
-
} @else {
|
|
20
|
-
@return 40px;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@function calc-padding-top-form-field-inflix($density) {
|
|
25
|
-
@if $density > -3 {
|
|
26
|
-
@return 20px;
|
|
27
|
-
} @else {
|
|
28
|
-
@return 14px;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
|
|
32
9
|
@mixin _ng-style-fixes {
|
|
33
10
|
// Trick to ensure flex functionality within router-outlet
|
|
34
11
|
router-outlet.router-flex + * {
|
|
@@ -44,9 +21,6 @@
|
|
|
44
21
|
|
|
45
22
|
@mixin _mat-style-fixes($theme) {
|
|
46
23
|
|
|
47
|
-
$iconSize: calc-form-icon-size($theme);
|
|
48
|
-
$iconPadding: calc-form-icon-padding($theme);
|
|
49
|
-
|
|
50
24
|
// Globally disable automatic scrolling of Material Drawer Container
|
|
51
25
|
.mat-drawer-inner-container {
|
|
52
26
|
overflow: hidden !important;
|
|
@@ -110,59 +84,44 @@
|
|
|
110
84
|
z-index: 1;
|
|
111
85
|
}
|
|
112
86
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
87
|
+
.mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
|
|
88
|
+
padding-left: 0 !important;
|
|
89
|
+
}
|
|
116
90
|
|
|
91
|
+
.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
|
|
92
|
+
padding-right: 0 !important;
|
|
93
|
+
}
|
|
117
94
|
|
|
118
|
-
.mat-mdc-form-field {
|
|
95
|
+
.mat-mdc-form-field:not(.mat-mdc-form-field.elder-dense) {
|
|
96
|
+
$density: map-get($theme, elder, density, form-field);
|
|
119
97
|
|
|
120
98
|
/******************************
|
|
121
|
-
Fix
|
|
99
|
+
Fix big paddings for dense form fields
|
|
122
100
|
*******************************/
|
|
123
101
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
a {
|
|
128
|
-
display: flex;
|
|
129
|
-
justify-content: center;
|
|
130
|
-
align-items: center;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
|
|
134
|
-
width: $iconSize !important;
|
|
135
|
-
height: $iconSize !important;
|
|
136
|
-
padding: 0 $iconPadding !important;
|
|
137
|
-
display: flex;
|
|
138
|
-
justify-content: center;
|
|
139
|
-
align-items: center;
|
|
140
|
-
box-sizing: border-box;
|
|
102
|
+
.mat-mdc-text-field-wrapper {
|
|
103
|
+
padding-left: calc-side-paddings($density);
|
|
104
|
+
padding-right: calc-side-paddings($density);
|
|
141
105
|
}
|
|
142
106
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
line-height: 0;
|
|
147
|
-
}
|
|
107
|
+
/******************************
|
|
108
|
+
Fix icon size and placement in mat label
|
|
109
|
+
*******************************/
|
|
148
110
|
|
|
149
|
-
.
|
|
150
|
-
width: $iconSize !important;
|
|
151
|
-
height: $iconSize !important;
|
|
152
|
-
padding: 0 $iconPadding !important;
|
|
153
|
-
line-height: 0;
|
|
154
|
-
}
|
|
111
|
+
@include mixins.form-field-icons($density);
|
|
155
112
|
|
|
156
113
|
/******************************
|
|
157
114
|
Fix text and hover placement of small filled form fields
|
|
158
115
|
*******************************/
|
|
159
116
|
|
|
117
|
+
$mat-mdc-form-field-label-transform: 0.75;
|
|
118
|
+
$mat-mdc-form-field-label-offset-x: -16px;
|
|
160
119
|
$form-field-density: map-get($theme, elder, density, form-field);
|
|
161
120
|
|
|
162
121
|
@if $form-field-density < -1 {
|
|
163
122
|
.mdc-text-field--filled {
|
|
164
123
|
.mdc-floating-label--float-above {
|
|
165
|
-
transform: var(
|
|
124
|
+
transform: var($mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))) !important;
|
|
166
125
|
}
|
|
167
126
|
.mat-mdc-form-field-infix {
|
|
168
127
|
padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
|
|
@@ -202,3 +161,31 @@
|
|
|
202
161
|
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
|
|
203
162
|
display: block !important;
|
|
204
163
|
}
|
|
164
|
+
|
|
165
|
+
@function calc-side-paddings($density) {
|
|
166
|
+
$paddingDensityNeg4: 8px;
|
|
167
|
+
$paddingDensityNeg3: 10px;
|
|
168
|
+
$paddingDensityNeg2: 12px;
|
|
169
|
+
$paddingDensityNeg1: 14px;
|
|
170
|
+
$paddingDensity0: 16px;
|
|
171
|
+
|
|
172
|
+
@if $density == -4 {
|
|
173
|
+
@return $paddingDensityNeg4;
|
|
174
|
+
} @else if $density == -3 {
|
|
175
|
+
@return $paddingDensityNeg3;
|
|
176
|
+
} @else if $density == -2 {
|
|
177
|
+
@return $paddingDensityNeg2;
|
|
178
|
+
} @else if $density == -1 {
|
|
179
|
+
@return $paddingDensityNeg1;
|
|
180
|
+
} @else if $density == 0 {
|
|
181
|
+
@return $paddingDensity0;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@function calc-padding-top-form-field-inflix($density) {
|
|
186
|
+
@if $density > -3 {
|
|
187
|
+
@return 20px;
|
|
188
|
+
} @else {
|
|
189
|
+
@return 14px;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
@mixin form-field-icons($density) {
|
|
2
|
+
$iconSize: calc-form-icon-size($density);
|
|
3
|
+
$iconPadding: calc-form-icon-padding($density);
|
|
4
|
+
|
|
5
|
+
a {
|
|
6
|
+
display: flex;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
align-items: center;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
|
|
12
|
+
width: $iconSize !important;
|
|
13
|
+
height: $iconSize !important;
|
|
14
|
+
padding: 0 $iconPadding !important;
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
align-items: center;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.mat-mdc-icon-button .mat-mdc-button-touch-target {
|
|
22
|
+
width: $iconSize !important;
|
|
23
|
+
height: $iconSize !important;
|
|
24
|
+
line-height: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
.mat-mdc-icon-button.mat-mdc-button-base {
|
|
30
|
+
width: $iconSize !important;
|
|
31
|
+
height: $iconSize !important;
|
|
32
|
+
padding: 0 $iconPadding !important;
|
|
33
|
+
line-height: 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@function calc-form-icon-padding($density) {
|
|
38
|
+
@return calc(12px + #{$density}px * 2);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@function calc-form-icon-size($density) {
|
|
42
|
+
@if $density > -3 {
|
|
43
|
+
@return 48px;
|
|
44
|
+
} @else {
|
|
45
|
+
@return 40px;
|
|
46
|
+
}
|
|
47
|
+
}
|