2 |
5 |
6 |
7 |
10 |
--------------------------------------------------------------------------------
/projects/color-picker/src/lib/components/color-collection/color-collection.component.scss:
--------------------------------------------------------------------------------
1 | .ngx-mat-color-collection{
2 | .btn-color{
3 | height: 20px;
4 | width: 20px;
5 | margin-right: 11px;
6 | box-shadow: none;
7 | opacity: 0.3;
8 | &.active{
9 | box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
10 | opacity: 1;
11 | }
12 | }
13 | }
--------------------------------------------------------------------------------
/projects/color-picker/src/lib/components/color-collection/color-collection.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, OnInit, Output, ViewEncapsulation, Input } from '@angular/core';
2 | import { Color } from '../../models';
3 | import { BASIC_COLORS, stringInputToObject } from '../../helpers';
4 |
5 | @Component({
6 | selector: 'ngx-mat-color-collection',
7 | templateUrl: './color-collection.component.html',
8 | styleUrls: ['./color-collection.component.scss'],
9 | encapsulation: ViewEncapsulation.None,
10 | host: {
11 | 'class': 'ngx-mat-color-collection'
12 | }
13 | })
14 | export class NgxMatColorCollectionComponent implements OnInit {
15 |
16 | @Output() colorChanged: EventEmitter
2 |
26 |
--------------------------------------------------------------------------------
/projects/datetime-picker/src/lib/calendar.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
25 |
5 |
15 |
16 |
17 |
26 |
27 |
28 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/projects/datetime-picker/src/lib/calendar.scss:
--------------------------------------------------------------------------------
1 | @mixin mat-fill {
2 | top: 0;
3 | left: 0;
4 | right: 0;
5 | bottom: 0;
6 | position: absolute;
7 | }
8 |
9 | $mat-calendar-padding: 8px !default;
10 | $mat-calendar-header-divider-width: 1px !default;
11 | $mat-calendar-controls-vertical-padding: 5%;
12 | // We use the same padding as the month / year label, but subtract 16px since there is padding
13 | // between the edge of the button and the text. This ensures that the button text lines up with
14 | // the month / year label text.
15 | $mat-calendar-controls-side-margin: calc(33% / 7 - 16px);
16 |
17 | $mat-calendar-arrow-size: 5px !default;
18 | $mat-calendar-arrow-disabled-opacity: 0.5 !default;
19 |
20 | // Values chosen to approximate https://material.io/icons/#ic_navigate_before and
21 | // https://material.io/icons/#ic_navigate_next as closely as possible.
22 | $mat-calendar-prev-next-icon-border-width: 2px;
23 | $mat-calendar-prev-next-icon-margin: 15.5px;
24 | $mat-calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
25 | $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
26 |
27 | .mat-calendar {
28 | display: block;
29 | }
30 |
31 | .mat-calendar-header {
32 | padding: $mat-calendar-padding $mat-calendar-padding 0 $mat-calendar-padding;
33 | }
34 |
35 | .mat-calendar-content {
36 | padding: 0 $mat-calendar-padding $mat-calendar-padding $mat-calendar-padding;
37 | outline: none;
38 | }
39 |
40 | .mat-calendar-controls {
41 | display: flex;
42 | margin: $mat-calendar-controls-vertical-padding $mat-calendar-controls-side-margin;
43 | }
44 |
45 | .mat-calendar-spacer {
46 | flex: 1 1 auto;
47 | }
48 |
49 | .mat-calendar-period-button {
50 | min-width: 0;
51 | }
52 |
53 | .mat-calendar-arrow {
54 | display: inline-block;
55 | width: 0;
56 | height: 0;
57 | border-left: $mat-calendar-arrow-size solid transparent;
58 | border-right: $mat-calendar-arrow-size solid transparent;
59 | border-top-width: $mat-calendar-arrow-size;
60 | border-top-style: solid;
61 | margin: 0 0 0 $mat-calendar-arrow-size;
62 | vertical-align: middle;
63 |
64 | &.mat-calendar-invert {
65 | transform: rotate(180deg);
66 | }
67 |
68 | [dir='rtl'] & {
69 | margin: 0 $mat-calendar-arrow-size 0 0;
70 | }
71 | }
72 |
73 | .mat-calendar-previous-button,
74 | .mat-calendar-next-button {
75 | position: relative;
76 |
77 | &::after {
78 | @include mat-fill;
79 | content: '';
80 | margin: $mat-calendar-prev-next-icon-margin;
81 | border: 0 solid currentColor;
82 | border-top-width: $mat-calendar-prev-next-icon-border-width;
83 | }
84 |
85 | [dir='rtl'] & {
86 | transform: rotate(180deg);
87 | }
88 | }
89 |
90 | .mat-calendar-previous-button::after {
91 | border-left-width: $mat-calendar-prev-next-icon-border-width;
92 | transform: $mat-calendar-prev-icon-transform;
93 | }
94 |
95 | .mat-calendar-next-button::after {
96 | border-right-width: $mat-calendar-prev-next-icon-border-width;
97 | transform: $mat-calendar-next-icon-transform;
98 | }
99 |
100 | .mat-calendar-table {
101 | border-spacing: 0;
102 | border-collapse: collapse;
103 | width: 100%;
104 | }
105 |
106 | .mat-calendar-table-header th {
107 | text-align: center;
108 | padding: 0 0 $mat-calendar-padding 0;
109 | }
110 |
111 | .mat-calendar-table-header-divider {
112 | position: relative;
113 | height: $mat-calendar-header-divider-width;
114 |
115 | // We use an absolutely positioned pseudo-element as the divider line for the table header so we
116 | // can extend it all the way to the edge of the calendar.
117 | &::after {
118 | content: '';
119 | position: absolute;
120 | top: 0;
121 | left: -$mat-calendar-padding;
122 | right: -$mat-calendar-padding;
123 | height: $mat-calendar-header-divider-width;
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/projects/datetime-picker/src/lib/core/date-adapter.ts:
--------------------------------------------------------------------------------
1 | import { DateAdapter } from '@angular/material/core';
2 |
3 | export abstract class NgxMatDateAdapter
10 |
14 |
15 |
16 |
17 |
21 |
22 | | {{day.narrow}} | 5 |
|---|
Github
8 |
9 |
10 |
11 | 
12 |
13 |
14 |
37 |
39 | HEX: {{colorCtr.value?.hex}}
3 | RGBA: {{colorCtr.value?.rgba}}
4 |
16 | disabled (Default: false)
17 |
18 |
19 | {{option.label}}
20 |
21 |
22 |
23 |
24 | touchUi (Default: false)
25 |
26 |
27 | {{option.label}}
28 |
29 |
30 |
31 |
32 | color (Default: primary)
33 |
34 | Select color
35 |
36 |
37 | {{item}}
38 |
39 |
40 |
41 |
42 |
46 |
47 | {{codeColorPicker}}
48 |
49 |
50 |
19 | disabled (Default: false)
20 |
21 |
22 | {{option.label}}
23 |
24 |
25 |
26 |
27 | showSpinners (Default: true)
28 |
29 |
30 | {{option.label}}
31 |
32 |
33 |
34 |
35 |
36 | showSeconds (Default: false)
37 |
38 |
39 | {{option.label}}
40 |
41 |
42 |
43 |
44 | touchUi (Default: false)
45 |
46 |
47 | {{option.label}}
48 |
49 |
50 |
51 |
52 | enableMeridian (Default: false)
53 |
54 |
55 | {{option.label}}
56 |
57 |
58 |
59 |
60 | steps
61 |
62 | hour (default: 1)
63 |
64 |
65 | {{step}}
66 |
67 |
68 |
69 |
70 | minute (default: 1)
71 |
72 |
73 | {{step}}
74 |
75 |
76 |
77 |
78 |
79 | second (default: 1)
80 |
81 |
82 | {{step}}
83 |
84 |
85 |
86 |
87 |
88 |
89 | color (Default: primary)
90 |
91 | Select color
92 |
93 |
94 | {{item}}
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | Min date (Default: null, Demo: now - 1 day) = {{minDate?.toLocaleString()}}
103 |
104 |
105 |
106 |
107 |
108 | Max date (Default: null, Demo: now + 2 days) = {{maxDate?.toLocaleString()}}
109 |
110 |
111 |
112 |
116 |
117 | {{codeDatePicker}}
118 |
119 |
120 |
12 | disabled (Default: false)
13 |
14 |
15 | {{option.label}}
16 |
17 |
18 |
19 |
20 | showSpinners (Default: true)
21 |
22 |
23 | {{option.label}}
24 |
25 |
26 |
27 |
28 |
29 | showSeconds (Default: false)
30 |
31 |
32 | {{option.label}}
33 |
34 |
35 |
36 |
37 | enableMeridian (Default: false)
38 |
39 |
40 | {{option.label}}
41 |
42 |
43 |
44 |
45 | steps
46 |
47 | hour (default: 1)
48 |
49 |
50 | {{step}}
51 |
52 |
53 |
54 |
55 | minute (default: 1)
56 |
57 |
58 | {{step}}
59 |
60 |
61 |
62 |
63 |
64 | second (default: 1)
65 |
66 |
67 | {{step}}
68 |
69 |
70 |
71 |
72 |
73 |
74 | color (Default: primary)
75 |
76 | Select color
77 |
78 |
79 | {{item}}
80 |
81 |
82 |
83 |
84 |
88 |
89 | {{codeTimePicker}}
90 |
91 |
92 | 2 | home works! 3 |
4 | -------------------------------------------------------------------------------- /src/app/home/home.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h2qutc/ngx-mat-datetime-picker/589180053342930731050e6213e30a58a66ccc43/src/app/home/home.component.scss -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-mat-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.scss'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/home/index.ts: -------------------------------------------------------------------------------- 1 | export * from './home.component'; -------------------------------------------------------------------------------- /src/app/shared/_common.scss: -------------------------------------------------------------------------------- 1 | .config-wrapper { 2 | margin-bottom: 15px; 3 | .label { 4 | font-weight: bold; 5 | margin-right: 15px; 6 | } 7 | .mat-radio-button ~ .mat-radio-button { 8 | margin-left: 16px; 9 | } 10 | 11 | &_step { 12 | .mat-form-field { 13 | margin-right: 20px; 14 | width: 100px; 15 | } 16 | } 17 | } 18 | 19 | .zone { 20 | display: flex; 21 | justify-content: center; 22 | margin-bottom: 20px; 23 | 24 | &-value { 25 | font-weight: bold; 26 | } 27 | 28 | &-config { 29 | flex-direction: column; 30 | } 31 | } 32 | 33 | pre { 34 | line-height: 140%; 35 | white-space: pre; 36 | white-space: pre-wrap; 37 | white-space: -moz-pre-wrap; 38 | white-space: -o-pre-wrap; 39 | border: 0.5px dashed rgba(0, 0, 0, 0.12); 40 | padding-left: 10px; 41 | padding-right: 10px; 42 | background-color: #f5f5f5; 43 | } 44 | 45 | code { 46 | line-height: 140%; 47 | white-space: pre; 48 | white-space: pre-wrap; 49 | white-space: -moz-pre-wrap; 50 | white-space: -o-pre-wrap; 51 | } 52 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h2qutc/ngx-mat-datetime-picker/589180053342930731050e6213e30a58a66ccc43/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/GitHub-Mark-Light-32px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h2qutc/ngx-mat-datetime-picker/589180053342930731050e6213e30a58a66ccc43/src/assets/GitHub-Mark-Light-32px.png -------------------------------------------------------------------------------- /src/assets/btn_donate_LG.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h2qutc/ngx-mat-datetime-picker/589180053342930731050e6213e30a58a66ccc43/src/assets/btn_donate_LG.gif -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/h2qutc/ngx-mat-datetime-picker/589180053342930731050e6213e30a58a66ccc43/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |