@dhutaryan/ngx-mat-timepicker 15.0.2 → 16.0.1
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/README.md +138 -136
- package/_index.scss +1 -1
- package/_timepicker-theme.scss +158 -158
- package/esm2022/dhutaryan-ngx-mat-timepicker.mjs +4 -4
- package/esm2022/lib/adapter/index.mjs +26 -26
- package/esm2022/lib/adapter/native-date-time-adapter.mjs +130 -130
- package/esm2022/lib/adapter/time-adapter.mjs +79 -79
- package/esm2022/lib/clock-dial-adnimation.mjs +11 -11
- package/esm2022/lib/clock-dials.mjs +82 -82
- package/esm2022/lib/hours-clock-dial.mjs +187 -187
- package/esm2022/lib/minutes-clock-dial.mjs +159 -159
- package/esm2022/lib/orientation.mjs +2 -2
- package/esm2022/lib/time-face-base.mjs +318 -318
- package/esm2022/lib/time-input-base.mjs +73 -73
- package/esm2022/lib/time-inputs.mjs +170 -170
- package/esm2022/lib/time-period.mjs +63 -63
- package/esm2022/lib/time-selection-model.mjs +76 -76
- package/esm2022/lib/timepicker-actions-default.mjs +3 -3
- package/esm2022/lib/timepicker-actions.mjs +130 -130
- package/esm2022/lib/timepicker-animations.mjs +22 -22
- package/esm2022/lib/timepicker-base.mjs +393 -393
- package/esm2022/lib/timepicker-content-layout.mjs +23 -23
- package/esm2022/lib/timepicker-content.mjs +101 -101
- package/esm2022/lib/timepicker-input-base.mjs +223 -223
- package/esm2022/lib/timepicker-input.mjs +135 -135
- package/esm2022/lib/timepicker-intl.mjs +25 -25
- package/esm2022/lib/timepicker-scroll-strategy.mjs +15 -15
- package/esm2022/lib/timepicker-toggle.mjs +68 -68
- package/esm2022/lib/timepicker.mjs +32 -32
- package/esm2022/lib/timepicker.module.mjs +157 -157
- package/esm2022/public-api.mjs +22 -22
- package/fesm2022/dhutaryan-ngx-mat-timepicker.mjs +2492 -2492
- package/fesm2022/dhutaryan-ngx-mat-timepicker.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/lib/adapter/index.d.ts +9 -9
- package/lib/adapter/native-date-time-adapter.d.ts +43 -43
- package/lib/adapter/time-adapter.d.ts +129 -129
- package/lib/clock-dial-adnimation.d.ts +1 -1
- package/lib/clock-dials.d.ts +32 -32
- package/lib/hours-clock-dial.d.ts +56 -56
- package/lib/minutes-clock-dial.d.ts +42 -42
- package/lib/orientation.d.ts +2 -2
- package/lib/time-face-base.d.ts +93 -93
- package/lib/time-input-base.d.ts +24 -24
- package/lib/time-inputs.d.ts +45 -45
- package/lib/time-period.d.ts +21 -21
- package/lib/time-selection-model.d.ts +62 -62
- package/lib/timepicker-actions-default.d.ts +3 -3
- package/lib/timepicker-actions.d.ts +50 -50
- package/lib/timepicker-animations.d.ts +6 -6
- package/lib/timepicker-base.d.ts +167 -167
- package/lib/timepicker-content-layout.d.ts +10 -10
- package/lib/timepicker-content.d.ts +69 -69
- package/lib/timepicker-input-base.d.ts +102 -102
- package/lib/timepicker-input.d.ts +47 -47
- package/lib/timepicker-intl.d.ts +17 -17
- package/lib/timepicker-scroll-strategy.d.ts +12 -12
- package/lib/timepicker-toggle.d.ts +30 -30
- package/lib/timepicker.d.ts +6 -6
- package/lib/timepicker.module.d.ts +28 -28
- package/package.json +4 -4
- package/public-api.d.ts +18 -18
- package/bundles/dhutaryan-ngx-mat-timepicker.umd.js +0 -3250
- package/bundles/dhutaryan-ngx-mat-timepicker.umd.js.map +0 -1
- package/dhutaryan-ngx-mat-timepicker.d.ts +0 -5
- package/esm2015/dhutaryan-ngx-mat-timepicker.js +0 -5
- package/esm2015/lib/adapter/index.js +0 -26
- package/esm2015/lib/adapter/native-date-time-adapter.js +0 -127
- package/esm2015/lib/adapter/time-adapter.js +0 -79
- package/esm2015/lib/clock-dials.js +0 -81
- package/esm2015/lib/hours-clock-dial.js +0 -264
- package/esm2015/lib/minutes-clock-dial.js +0 -157
- package/esm2015/lib/orientation.js +0 -2
- package/esm2015/lib/time-face-base.js +0 -245
- package/esm2015/lib/time-input-base.js +0 -86
- package/esm2015/lib/time-inputs.js +0 -176
- package/esm2015/lib/time-period.js +0 -69
- package/esm2015/lib/time-selection-model.js +0 -76
- package/esm2015/lib/timepicker-actions-default.js +0 -3
- package/esm2015/lib/timepicker-actions.js +0 -145
- package/esm2015/lib/timepicker-animations.js +0 -22
- package/esm2015/lib/timepicker-base.js +0 -402
- package/esm2015/lib/timepicker-content-layout.js +0 -31
- package/esm2015/lib/timepicker-content.js +0 -112
- package/esm2015/lib/timepicker-input-base.js +0 -223
- package/esm2015/lib/timepicker-input.js +0 -135
- package/esm2015/lib/timepicker-intl.js +0 -25
- package/esm2015/lib/timepicker-scroll-strategy.js +0 -15
- package/esm2015/lib/timepicker-toggle.js +0 -76
- package/esm2015/lib/timepicker.js +0 -32
- package/esm2015/lib/timepicker.module.js +0 -151
- package/esm2015/public-api.js +0 -22
- package/fesm2015/dhutaryan-ngx-mat-timepicker.js +0 -2637
- package/fesm2015/dhutaryan-ngx-mat-timepicker.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,136 +1,138 @@
|
|
|
1
|
-
# ngx-mat-timepicker
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)
|
|
4
|
-
[](https://www.codefactor.io/repository/github/dhutaryan/ngx-mat-timepicker)
|
|
5
|
-
[](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)
|
|
6
|
-

|
|
7
|
-
|
|
8
|
-
The timepicker module using Angular material.
|
|
9
|
-
|
|
10
|
-
### Versions
|
|
11
|
-
|
|
12
|
-
| mat-timepicker | Angular |
|
|
13
|
-
| -------------- | ------------------- |
|
|
14
|
-
| 12.x.x | >=12.0.0 && <15.0.0 |
|
|
15
|
-
| 13.x.x | >=13.0.0 && <15.0.0 |
|
|
16
|
-
| 14.x.x | ^14.0.0 |
|
|
17
|
-
| 15.x.x | ^15.0.0 |
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
@include mat.
|
|
100
|
-
@include mat.
|
|
101
|
-
@include mat.
|
|
102
|
-
@include mat.
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
@
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
1
|
+
# ngx-mat-timepicker
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@dhutaryan/ngx-mat-timepicker)
|
|
4
|
+
[](https://www.codefactor.io/repository/github/dhutaryan/ngx-mat-timepicker)
|
|
5
|
+
[](https://github.com/dgutoryan/ngx-timepicker/blob/master/LICENSE)
|
|
6
|
+

|
|
7
|
+
|
|
8
|
+
The timepicker module using Angular material.
|
|
9
|
+
|
|
10
|
+
### Versions
|
|
11
|
+
|
|
12
|
+
| mat-timepicker | Angular |
|
|
13
|
+
| -------------- | ------------------- |
|
|
14
|
+
| 12.x.x | >=12.0.0 && <15.0.0 |
|
|
15
|
+
| 13.x.x | >=13.0.0 && <15.0.0 |
|
|
16
|
+
| 14.x.x | ^14.0.0 |
|
|
17
|
+
| 15.x.x | ^15.0.0 |
|
|
18
|
+
| 16.x.x | ^16.0.0 |
|
|
19
|
+
|
|
20
|
+
## Documentation
|
|
21
|
+
|
|
22
|
+
Check out the [demo](https://dhutaryan.github.io/ngx-mat-timepicker/) and [API](https://github.com/dhutaryan/ngx-mat-timepicker/wiki/API).
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
You have to install the Angular Material and set it up. [Learn more about the setup](https://material.angular.io/guide/getting-started).
|
|
27
|
+
|
|
28
|
+
Install the library:
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
$ npm install --save @dhutaryan/ngx-mat-timepicker
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
or
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
$ yarn add @dhutaryan/ngx-mat-timepicker
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Getting started
|
|
41
|
+
|
|
42
|
+
Import `MatTimepickerModule` to your project.
|
|
43
|
+
|
|
44
|
+
```typescript
|
|
45
|
+
import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
|
|
46
|
+
|
|
47
|
+
@NgModule({
|
|
48
|
+
imports: [
|
|
49
|
+
// ...
|
|
50
|
+
MatTimepickerModule,
|
|
51
|
+
// ...
|
|
52
|
+
],
|
|
53
|
+
})
|
|
54
|
+
export class MyModule {}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Adapter
|
|
58
|
+
|
|
59
|
+
Add a timepicker adapter.
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
import { MatNativeDateTimeModule, MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
|
|
63
|
+
|
|
64
|
+
@NgModule({
|
|
65
|
+
imports: [
|
|
66
|
+
// ...
|
|
67
|
+
MatTimepickerModule,
|
|
68
|
+
MatNativeDateTimeModule,
|
|
69
|
+
// ...
|
|
70
|
+
],
|
|
71
|
+
})
|
|
72
|
+
export class MyModule {}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
or create your own
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
import { MatTimepickerModule } from "@dhutaryan/ngx-mat-timepicker";
|
|
79
|
+
|
|
80
|
+
@NgModule({
|
|
81
|
+
imports: [
|
|
82
|
+
// ...
|
|
83
|
+
MatTimepickerModule,
|
|
84
|
+
// ...
|
|
85
|
+
],
|
|
86
|
+
providers: [{ provide: TimeAdapter, useClass: MyTimeAdapter }],
|
|
87
|
+
})
|
|
88
|
+
export class MyModule {}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Theming
|
|
92
|
+
|
|
93
|
+
Then you have to define a theme. [More details about theming](https://material.angular.io/guide/theming).
|
|
94
|
+
|
|
95
|
+
```scss
|
|
96
|
+
@use "@dhutaryan/ngx-mat-timepicker" as mat-timepicker;
|
|
97
|
+
|
|
98
|
+
// timepicker uses these component
|
|
99
|
+
@include mat.form-field-theme(theme.$ngx-mat-timepicker-theme);
|
|
100
|
+
@include mat.input-theme(theme.$ngx-mat-timepicker-theme);
|
|
101
|
+
@include mat.button-theme(theme.$ngx-mat-timepicker-theme);
|
|
102
|
+
@include mat.fab-theme(theme.$ngx-mat-timepicker-theme);
|
|
103
|
+
@include mat.icon-button-theme(theme.$ngx-mat-timepicker-theme);
|
|
104
|
+
@include mat.divider-theme(theme.$ngx-mat-timepicker-theme);
|
|
105
|
+
|
|
106
|
+
// timepicker theme
|
|
107
|
+
@include mat-timepicker.timepicker-theme($theme);
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Usage
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<mat-form-field>
|
|
114
|
+
<input type="text" matInput [matTimepicker]="timepicker" />
|
|
115
|
+
<mat-timepicker-toggle matSuffix [for]="timepicker"></mat-timepicker-toggle>
|
|
116
|
+
<mat-timepicker #timepicker></mat-timepicker>
|
|
117
|
+
</mat-form-field>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## Locale
|
|
121
|
+
|
|
122
|
+
Default locale is `en-US`. You can set your locale as:
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
import { MAT_TIME_LOCALE } from "@dhutaryan/ngx-mat-timepicker";
|
|
126
|
+
|
|
127
|
+
@NgModule({
|
|
128
|
+
imports: [
|
|
129
|
+
// ...
|
|
130
|
+
],
|
|
131
|
+
providers: [{ provide: MAT_TIME_LOCALE, useValue: "en-GB" }],
|
|
132
|
+
})
|
|
133
|
+
export class MyModule {}
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## License
|
|
137
|
+
|
|
138
|
+
MIT
|
package/_index.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward "./timepicker-theme" as timepicker-* show timepicker-theme;
|
|
1
|
+
@forward "./timepicker-theme" as timepicker-* show timepicker-theme;
|
package/_timepicker-theme.scss
CHANGED
|
@@ -1,158 +1,158 @@
|
|
|
1
|
-
@use "sass:color";
|
|
2
|
-
@use "sass:map";
|
|
3
|
-
@use "@angular/material" as mat;
|
|
4
|
-
|
|
5
|
-
$timepicker-content-title-font-size: 12px !default;
|
|
6
|
-
$input-font-size: 2rem !default;
|
|
7
|
-
$inputs-separator-font-size: 3rem !default;
|
|
8
|
-
$inputs-separator-line-height: 1.25rem;
|
|
9
|
-
$primary-opacity: 0.15;
|
|
10
|
-
|
|
11
|
-
@mixin _color($palette) {
|
|
12
|
-
.mat-time-period-item-active,
|
|
13
|
-
.mat-clock-dial-value.mat-clock-dial-value-active {
|
|
14
|
-
color: mat.get-color-from-palette($palette);
|
|
15
|
-
background-color: mat.get-color-from-palette($palette, $primary-opacity);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.mat-clock-dial::before {
|
|
19
|
-
background-color: mat.get-color-from-palette($palette);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
|
|
23
|
-
background-color: mat.get-color-from-palette($palette);
|
|
24
|
-
|
|
25
|
-
&::before {
|
|
26
|
-
background-color: mat.get-color-from-palette($palette);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.mat-clock-dial-hand.mat-clock-dial-hand-disabled {
|
|
31
|
-
&::before {
|
|
32
|
-
background-color: color.adjust(
|
|
33
|
-
mat.get-color-from-palette($palette),
|
|
34
|
-
$alpha: -0.6
|
|
35
|
-
);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
|
|
40
|
-
background-color: color.adjust(
|
|
41
|
-
mat.get-color-from-palette($palette),
|
|
42
|
-
$alpha: -0.6
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@mixin color($config-or-theme) {
|
|
48
|
-
$config: mat.get-color-config($config-or-theme);
|
|
49
|
-
$is-dark-theme: map.get($config, is-dark);
|
|
50
|
-
$foreground: map.get($config, foreground);
|
|
51
|
-
$background: map.get($config, background);
|
|
52
|
-
|
|
53
|
-
@include _color(map.get($config, primary));
|
|
54
|
-
|
|
55
|
-
.mat-timepicker-content {
|
|
56
|
-
@include mat.elevation(4);
|
|
57
|
-
background-color: mat.get-color-from-palette($background, card);
|
|
58
|
-
color: mat.get-color-from-palette($foreground, text);
|
|
59
|
-
|
|
60
|
-
&.mat-accent {
|
|
61
|
-
@include _color(map.get($config, accent));
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
&.mat-warn {
|
|
65
|
-
@include _color(map.get($config, warn));
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.mat-timepicker-content-layout-title {
|
|
70
|
-
color: mat.get-color-from-palette($foreground, secondary-text);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.mat-time-toggle-mode-button svg {
|
|
74
|
-
fill: mat.get-color-from-palette($foreground, secondary-text);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.mat-time-period {
|
|
78
|
-
border-color: mat.get-color-from-palette($foreground, divider);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.mat-time-period-item-disabled {
|
|
82
|
-
color: mat.get-color-from-palette($foreground, disabled-button);
|
|
83
|
-
background-color: mat.get-color-from-palette($background, disabled-button);
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.mat-clock-dial-value,
|
|
87
|
-
.mat-clock-dial,
|
|
88
|
-
.mat-mdc-text-field-wrapper {
|
|
89
|
-
background-color: mat.get-color-from-palette($background, background);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.mat-clock-dial-hand.mat-clock-dial-hand-disabled {
|
|
93
|
-
background-color: transparent;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
[mat-mini-fab]:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
|
|
97
|
-
background: transparent;
|
|
98
|
-
|
|
99
|
-
&:not(.mat-clock-dial-cell-disabled):hover {
|
|
100
|
-
background-color: mat.get-color-from-palette($background, hover);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
[mat-mini-fab].mat-clock-dial-cell-disabled:hover {
|
|
105
|
-
cursor: default;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled {
|
|
109
|
-
color: mat.get-color-from-palette($foreground, disabled-button);
|
|
110
|
-
|
|
111
|
-
.mat-mdc-button-persistent-ripple::before {
|
|
112
|
-
background-color: transparent;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
@mixin typography($config-or-theme) {
|
|
118
|
-
$config: mat.get-typography-config($config-or-theme);
|
|
119
|
-
|
|
120
|
-
h6.mat-timepicker-content-layout-title {
|
|
121
|
-
font: {
|
|
122
|
-
size: $timepicker-content-title-font-size;
|
|
123
|
-
weight: mat.font-weight($config, subtitle-2);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.mat-time-inputs-field {
|
|
128
|
-
input.mat-mdc-input-element {
|
|
129
|
-
font-size: $input-font-size;
|
|
130
|
-
line-height: normal;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.mat-timepicker-content-layout-separator {
|
|
135
|
-
font-size: $inputs-separator-font-size;
|
|
136
|
-
line-height: $inputs-separator-line-height;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.mat-clock-dial-value {
|
|
140
|
-
font-size: $input-font-size;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
@mixin theme($theme-or-color-config) {
|
|
145
|
-
$color: mat.get-color-config($theme-or-color-config);
|
|
146
|
-
$typography: mat.get-typography-config($theme-or-color-config);
|
|
147
|
-
|
|
148
|
-
@if $color != null {
|
|
149
|
-
@include color($color);
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
@if $typography != null {
|
|
153
|
-
@include typography($typography);
|
|
154
|
-
} @else {
|
|
155
|
-
$typography: mat.define-typography-config();
|
|
156
|
-
@include typography($typography);
|
|
157
|
-
}
|
|
158
|
-
}
|
|
1
|
+
@use "sass:color";
|
|
2
|
+
@use "sass:map";
|
|
3
|
+
@use "@angular/material" as mat;
|
|
4
|
+
|
|
5
|
+
$timepicker-content-title-font-size: 12px !default;
|
|
6
|
+
$input-font-size: 2rem !default;
|
|
7
|
+
$inputs-separator-font-size: 3rem !default;
|
|
8
|
+
$inputs-separator-line-height: 1.25rem;
|
|
9
|
+
$primary-opacity: 0.15;
|
|
10
|
+
|
|
11
|
+
@mixin _color($palette) {
|
|
12
|
+
.mat-time-period-item-active,
|
|
13
|
+
.mat-clock-dial-value.mat-clock-dial-value-active {
|
|
14
|
+
color: mat.get-color-from-palette($palette);
|
|
15
|
+
background-color: mat.get-color-from-palette($palette, $primary-opacity);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.mat-clock-dial::before {
|
|
19
|
+
background-color: mat.get-color-from-palette($palette);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.mat-clock-dial-hand:not(.mat-clock-dial-hand-disabled) {
|
|
23
|
+
background-color: mat.get-color-from-palette($palette);
|
|
24
|
+
|
|
25
|
+
&::before {
|
|
26
|
+
background-color: mat.get-color-from-palette($palette);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.mat-clock-dial-hand.mat-clock-dial-hand-disabled {
|
|
31
|
+
&::before {
|
|
32
|
+
background-color: color.adjust(
|
|
33
|
+
mat.get-color-from-palette($palette),
|
|
34
|
+
$alpha: -0.6
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled.mat-clock-dial-cell-active {
|
|
40
|
+
background-color: color.adjust(
|
|
41
|
+
mat.get-color-from-palette($palette),
|
|
42
|
+
$alpha: -0.6
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@mixin color($config-or-theme) {
|
|
48
|
+
$config: mat.get-color-config($config-or-theme);
|
|
49
|
+
$is-dark-theme: map.get($config, is-dark);
|
|
50
|
+
$foreground: map.get($config, foreground);
|
|
51
|
+
$background: map.get($config, background);
|
|
52
|
+
|
|
53
|
+
@include _color(map.get($config, primary));
|
|
54
|
+
|
|
55
|
+
.mat-timepicker-content {
|
|
56
|
+
@include mat.elevation(4);
|
|
57
|
+
background-color: mat.get-color-from-palette($background, card);
|
|
58
|
+
color: mat.get-color-from-palette($foreground, text);
|
|
59
|
+
|
|
60
|
+
&.mat-accent {
|
|
61
|
+
@include _color(map.get($config, accent));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.mat-warn {
|
|
65
|
+
@include _color(map.get($config, warn));
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.mat-timepicker-content-layout-title {
|
|
70
|
+
color: mat.get-color-from-palette($foreground, secondary-text);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.mat-time-toggle-mode-button svg {
|
|
74
|
+
fill: mat.get-color-from-palette($foreground, secondary-text);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.mat-time-period {
|
|
78
|
+
border-color: mat.get-color-from-palette($foreground, divider);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.mat-time-period-item-disabled {
|
|
82
|
+
color: mat.get-color-from-palette($foreground, disabled-button);
|
|
83
|
+
background-color: mat.get-color-from-palette($background, disabled-button);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.mat-clock-dial-value,
|
|
87
|
+
.mat-clock-dial,
|
|
88
|
+
.mat-mdc-text-field-wrapper {
|
|
89
|
+
background-color: mat.get-color-from-palette($background, background);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.mat-clock-dial-hand.mat-clock-dial-hand-disabled {
|
|
93
|
+
background-color: transparent;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
[mat-mini-fab]:not(.mat-primary):not(.mat-accent):not(.mat-warn) {
|
|
97
|
+
background: transparent;
|
|
98
|
+
|
|
99
|
+
&:not(.mat-clock-dial-cell-disabled):hover {
|
|
100
|
+
background-color: mat.get-color-from-palette($background, hover);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
[mat-mini-fab].mat-clock-dial-cell-disabled:hover {
|
|
105
|
+
cursor: default;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
[mat-mini-fab].mat-clock-dial-cell.mat-clock-dial-cell-disabled {
|
|
109
|
+
color: mat.get-color-from-palette($foreground, disabled-button);
|
|
110
|
+
|
|
111
|
+
.mat-mdc-button-persistent-ripple::before {
|
|
112
|
+
background-color: transparent;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@mixin typography($config-or-theme) {
|
|
118
|
+
$config: mat.get-typography-config($config-or-theme);
|
|
119
|
+
|
|
120
|
+
h6.mat-timepicker-content-layout-title {
|
|
121
|
+
font: {
|
|
122
|
+
size: $timepicker-content-title-font-size;
|
|
123
|
+
weight: mat.font-weight($config, subtitle-2);
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.mat-time-inputs-field {
|
|
128
|
+
input.mat-mdc-input-element {
|
|
129
|
+
font-size: $input-font-size;
|
|
130
|
+
line-height: normal;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.mat-timepicker-content-layout-separator {
|
|
135
|
+
font-size: $inputs-separator-font-size;
|
|
136
|
+
line-height: $inputs-separator-line-height;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.mat-clock-dial-value {
|
|
140
|
+
font-size: $input-font-size;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@mixin theme($theme-or-color-config) {
|
|
145
|
+
$color: mat.get-color-config($theme-or-color-config);
|
|
146
|
+
$typography: mat.get-typography-config($theme-or-color-config);
|
|
147
|
+
|
|
148
|
+
@if $color != null {
|
|
149
|
+
@include color($color);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
@if $typography != null {
|
|
153
|
+
@include typography($typography);
|
|
154
|
+
} @else {
|
|
155
|
+
$typography: mat.define-typography-config();
|
|
156
|
+
@include typography($typography);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Generated bundle index. Do not edit.
|
|
3
|
-
*/
|
|
4
|
-
export * from './public-api';
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './public-api';
|
|
5
5
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGh1dGFyeWFuLW5neC1tYXQtdGltZXBpY2tlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL21hdC10aW1lcGlja2VyL3NyYy9kaHV0YXJ5YW4tbmd4LW1hdC10aW1lcGlja2VyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { PlatformModule } from '@angular/cdk/platform';
|
|
2
|
-
import { NgModule } from '@angular/core';
|
|
3
|
-
import { MAT_TIME_LOCALE_PROVIDER, TimeAdapter } from './time-adapter';
|
|
4
|
-
import { NativeDateTimeAdapter } from './native-date-time-adapter';
|
|
5
|
-
import * as i0 from "@angular/core";
|
|
6
|
-
export * from './time-adapter';
|
|
7
|
-
export * from './native-date-time-adapter';
|
|
8
|
-
export class MatNativeDateTimeModule {
|
|
9
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
10
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, imports: [PlatformModule] }); }
|
|
11
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, providers: [
|
|
12
|
-
{ provide: TimeAdapter, useClass: NativeDateTimeAdapter },
|
|
13
|
-
MAT_TIME_LOCALE_PROVIDER,
|
|
14
|
-
], imports: [PlatformModule] }); }
|
|
15
|
-
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, decorators: [{
|
|
17
|
-
type: NgModule,
|
|
18
|
-
args: [{
|
|
19
|
-
imports: [PlatformModule],
|
|
20
|
-
providers: [
|
|
21
|
-
{ provide: TimeAdapter, useClass: NativeDateTimeAdapter },
|
|
22
|
-
MAT_TIME_LOCALE_PROVIDER,
|
|
23
|
-
],
|
|
24
|
-
}]
|
|
25
|
-
}] });
|
|
26
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
1
|
+
import { PlatformModule } from '@angular/cdk/platform';
|
|
2
|
+
import { NgModule } from '@angular/core';
|
|
3
|
+
import { MAT_TIME_LOCALE_PROVIDER, TimeAdapter } from './time-adapter';
|
|
4
|
+
import { NativeDateTimeAdapter } from './native-date-time-adapter';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export * from './time-adapter';
|
|
7
|
+
export * from './native-date-time-adapter';
|
|
8
|
+
export class MatNativeDateTimeModule {
|
|
9
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
10
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, imports: [PlatformModule] }); }
|
|
11
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, providers: [
|
|
12
|
+
{ provide: TimeAdapter, useClass: NativeDateTimeAdapter },
|
|
13
|
+
MAT_TIME_LOCALE_PROVIDER,
|
|
14
|
+
], imports: [PlatformModule] }); }
|
|
15
|
+
}
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: MatNativeDateTimeModule, decorators: [{
|
|
17
|
+
type: NgModule,
|
|
18
|
+
args: [{
|
|
19
|
+
imports: [PlatformModule],
|
|
20
|
+
providers: [
|
|
21
|
+
{ provide: TimeAdapter, useClass: NativeDateTimeAdapter },
|
|
22
|
+
MAT_TIME_LOCALE_PROVIDER,
|
|
23
|
+
],
|
|
24
|
+
}]
|
|
25
|
+
}] });
|
|
26
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXQtdGltZXBpY2tlci9zcmMvbGliL2FkYXB0ZXIvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFekMsT0FBTyxFQUFFLHdCQUF3QixFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDRCQUE0QixDQUFDOztBQUVuRSxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsNEJBQTRCLENBQUM7QUFTM0MsTUFBTSxPQUFPLHVCQUF1Qjs4R0FBdkIsdUJBQXVCOytHQUF2Qix1QkFBdUIsWUFOeEIsY0FBYzsrR0FNYix1QkFBdUIsYUFMdkI7WUFDVCxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFFLHFCQUFxQixFQUFFO1lBQ3pELHdCQUF3QjtTQUN6QixZQUpTLGNBQWM7OzJGQU1iLHVCQUF1QjtrQkFQbkMsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUUsQ0FBQyxjQUFjLENBQUM7b0JBQ3pCLFNBQVMsRUFBRTt3QkFDVCxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFFLHFCQUFxQixFQUFFO3dCQUN6RCx3QkFBd0I7cUJBQ3pCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGxhdGZvcm1Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvcGxhdGZvcm0nO1xuaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgTUFUX1RJTUVfTE9DQUxFX1BST1ZJREVSLCBUaW1lQWRhcHRlciB9IGZyb20gJy4vdGltZS1hZGFwdGVyJztcbmltcG9ydCB7IE5hdGl2ZURhdGVUaW1lQWRhcHRlciB9IGZyb20gJy4vbmF0aXZlLWRhdGUtdGltZS1hZGFwdGVyJztcblxuZXhwb3J0ICogZnJvbSAnLi90aW1lLWFkYXB0ZXInO1xuZXhwb3J0ICogZnJvbSAnLi9uYXRpdmUtZGF0ZS10aW1lLWFkYXB0ZXInO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbUGxhdGZvcm1Nb2R1bGVdLFxuICBwcm92aWRlcnM6IFtcbiAgICB7IHByb3ZpZGU6IFRpbWVBZGFwdGVyLCB1c2VDbGFzczogTmF0aXZlRGF0ZVRpbWVBZGFwdGVyIH0sXG4gICAgTUFUX1RJTUVfTE9DQUxFX1BST1ZJREVSLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBNYXROYXRpdmVEYXRlVGltZU1vZHVsZSB7fVxuIl19
|