@nuralyui/datepicker 0.0.5 → 0.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/bundle.js +228 -231
- package/datepicker.component.d.ts +8 -8
- package/datepicker.component.js +12 -12
- package/datepicker.component.js.map +1 -1
- package/datepicker.style.d.ts +13 -3
- package/datepicker.style.js +112 -113
- package/datepicker.style.js.map +1 -1
- package/datepicker.style.variables.d.ts +1 -10
- package/datepicker.style.variables.js +114 -110
- package/datepicker.style.variables.js.map +1 -1
- package/{datepicker.type.d.ts → datepicker.types.d.ts} +1 -1
- package/{datepicker.type.js → datepicker.types.js} +1 -1
- package/datepicker.types.js.map +1 -0
- package/index.d.ts +1 -2
- package/index.js +1 -2
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react.js +1 -1
- package/react.js.map +1 -1
- package/datepicker.type.js.map +0 -1
|
@@ -1,115 +1,119 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright 2023 Google Laabidi Aymen
|
|
4
|
-
* SPDX-License-Identifier: MIT
|
|
5
|
-
*/
|
|
6
1
|
import { css } from 'lit';
|
|
7
|
-
|
|
8
|
-
* CSS custom properties for datepicker component (light theme defaults)
|
|
9
|
-
* These are the local component defaults that can be overridden globally
|
|
10
|
-
*/
|
|
11
|
-
export const datepickerVariables = css `
|
|
2
|
+
export const styleVariables = css `
|
|
12
3
|
:host {
|
|
13
|
-
/*
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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
|
-
|
|
100
|
-
--
|
|
101
|
-
--
|
|
102
|
-
--
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
--
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
--
|
|
4
|
+
/* ========================================
|
|
5
|
+
* DATEPICKER THEME-AWARE VARIABLES
|
|
6
|
+
* Uses CSS custom properties from theme files
|
|
7
|
+
* ======================================== */
|
|
8
|
+
|
|
9
|
+
/* Base datepicker styling - uses theme variables with fallbacks */
|
|
10
|
+
--nuraly-datepicker-local-background-color: var(--nuraly-color-datepicker-background, #ffffff);
|
|
11
|
+
--nuraly-datepicker-local-text-color: var(--nuraly-color-datepicker-text, #000000);
|
|
12
|
+
--nuraly-datepicker-local-font-family: var(--nuraly-font-family-datepicker, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
|
|
13
|
+
--nuraly-datepicker-local-font-size: var(--nuraly-font-size-datepicker, 14px);
|
|
14
|
+
|
|
15
|
+
/* Datepicker borders - theme-aware */
|
|
16
|
+
--nuraly-datepicker-local-border-color: var(--nuraly-color-datepicker-border, #d9d9d9);
|
|
17
|
+
--nuraly-datepicker-local-border-width: var(--nuraly-border-width-datepicker, 1px);
|
|
18
|
+
--nuraly-datepicker-local-border-radius: var(--nuraly-border-radius-datepicker, 8px);
|
|
19
|
+
|
|
20
|
+
/* Primary and selection colors - theme-aware */
|
|
21
|
+
--nuraly-datepicker-local-primary-color: var(--nuraly-color-datepicker-primary, #1677ff);
|
|
22
|
+
--nuraly-datepicker-local-selected-color: var(--nuraly-color-datepicker-selected, #1677ff);
|
|
23
|
+
--nuraly-datepicker-local-selected-text-color: var(--nuraly-color-datepicker-selected-text, #ffffff);
|
|
24
|
+
--nuraly-datepicker-local-hover-color: var(--nuraly-color-datepicker-hover, #f5f5f5);
|
|
25
|
+
--nuraly-datepicker-local-today-color: var(--nuraly-color-datepicker-today, #1677ff);
|
|
26
|
+
|
|
27
|
+
/* Disabled states - theme-aware */
|
|
28
|
+
--nuraly-datepicker-local-disabled-color: var(--nuraly-color-datepicker-disabled, #f5f5f5);
|
|
29
|
+
--nuraly-datepicker-local-disabled-text-color: var(--nuraly-color-datepicker-disabled-text, #bfbfbf);
|
|
30
|
+
--nuraly-datepicker-local-disabled-opacity: var(--nuraly-opacity-datepicker-disabled, 0.5);
|
|
31
|
+
|
|
32
|
+
/* Input field colors - theme-aware */
|
|
33
|
+
--nuraly-datepicker-local-input-background: var(--nuraly-color-datepicker-input-background, #ffffff);
|
|
34
|
+
--nuraly-datepicker-local-input-border-color: var(--nuraly-color-datepicker-input-border, #d9d9d9);
|
|
35
|
+
--nuraly-datepicker-local-input-focus-border-color: var(--nuraly-color-datepicker-input-focus-border, #1677ff);
|
|
36
|
+
--nuraly-datepicker-local-input-text-color: var(--nuraly-color-datepicker-input-text, #000000);
|
|
37
|
+
--nuraly-datepicker-local-input-placeholder-color: var(--nuraly-color-datepicker-input-placeholder, #bfbfbf);
|
|
38
|
+
|
|
39
|
+
/* Special date colors - theme-aware */
|
|
40
|
+
--nuraly-datepicker-local-weekend-color: var(--nuraly-color-datepicker-weekend, #ff4d4f);
|
|
41
|
+
--nuraly-datepicker-local-weekday-color: var(--nuraly-color-datepicker-weekday, #8c8c8c);
|
|
42
|
+
--nuraly-datepicker-local-range-color: var(--nuraly-color-datepicker-range, rgba(22, 119, 255, 0.1));
|
|
43
|
+
--nuraly-datepicker-local-error-color: var(--nuraly-color-datepicker-error, #da1e28);
|
|
44
|
+
--nuraly-datepicker-local-warning-color: var(--nuraly-color-datepicker-warning, #f0c300);
|
|
45
|
+
--nuraly-datepicker-local-success-color: var(--nuraly-color-datepicker-success, #24a148);
|
|
46
|
+
|
|
47
|
+
/* Header specific colors - theme-aware */
|
|
48
|
+
--nuraly-datepicker-local-header-background: var(--nuraly-color-datepicker-header-background, #ffffff);
|
|
49
|
+
--nuraly-datepicker-local-hover-background: var(--nuraly-color-datepicker-hover-background, rgba(0, 0, 0, 0.04));
|
|
50
|
+
--nuraly-datepicker-local-active-background: var(--nuraly-color-datepicker-active-background, rgba(0, 0, 0, 0.06));
|
|
51
|
+
|
|
52
|
+
/* Layout and sizing - theme-aware */
|
|
53
|
+
--nuraly-datepicker-local-width: var(--nuraly-size-datepicker-width, 280px);
|
|
54
|
+
--nuraly-datepicker-local-height: var(--nuraly-size-datepicker-height, auto);
|
|
55
|
+
--nuraly-datepicker-local-calendar-width: var(--nuraly-size-datepicker-calendar-width, 320px);
|
|
56
|
+
--nuraly-datepicker-local-calendar-height: var(--nuraly-size-datepicker-calendar-height, auto);
|
|
57
|
+
--nuraly-datepicker-local-day-size: var(--nuraly-size-datepicker-day, 36px);
|
|
58
|
+
--nuraly-datepicker-local-header-height: var(--nuraly-size-datepicker-header-height, 56px);
|
|
59
|
+
|
|
60
|
+
/* Typography - theme-aware */
|
|
61
|
+
--nuraly-datepicker-local-font-weight: var(--nuraly-font-weight-datepicker, 400);
|
|
62
|
+
--nuraly-datepicker-local-header-font-size: var(--nuraly-font-size-datepicker-header, 16px);
|
|
63
|
+
--nuraly-datepicker-local-header-font-weight: var(--nuraly-font-weight-datepicker-header, 600);
|
|
64
|
+
--nuraly-datepicker-local-day-font-size: var(--nuraly-font-size-datepicker-day, 14px);
|
|
65
|
+
--nuraly-datepicker-local-input-font-size: var(--nuraly-font-size-datepicker-input, 14px);
|
|
66
|
+
--nuraly-datepicker-local-label-font-size: var(--nuraly-font-size-datepicker-label, 14px);
|
|
67
|
+
--nuraly-datepicker-local-helper-font-size: var(--nuraly-font-size-datepicker-helper, 12px);
|
|
68
|
+
--nuraly-datepicker-local-message-font-size: var(--nuraly-font-size-datepicker-message, 12px);
|
|
69
|
+
|
|
70
|
+
/* Spacing - theme-aware */
|
|
71
|
+
--nuraly-datepicker-local-gap: var(--nuraly-spacing-datepicker-gap, 6px);
|
|
72
|
+
--nuraly-datepicker-local-calendar-padding: var(--nuraly-spacing-datepicker-calendar-padding, 12px);
|
|
73
|
+
--nuraly-datepicker-local-day-padding: var(--nuraly-spacing-datepicker-day-padding, 6px);
|
|
74
|
+
--nuraly-datepicker-local-input-padding: var(--nuraly-spacing-datepicker-input-padding, 8px 12px);
|
|
75
|
+
--nuraly-datepicker-local-padding: var(--nuraly-spacing-datepicker-padding, 16px);
|
|
76
|
+
--nuraly-datepicker-local-margin: var(--nuraly-spacing-datepicker-margin, 0);
|
|
77
|
+
|
|
78
|
+
/* Borders - theme-aware */
|
|
79
|
+
--nuraly-datepicker-local-input-border-width: var(--nuraly-border-width-datepicker-input, 1px);
|
|
80
|
+
--nuraly-datepicker-local-focus-border-width: var(--nuraly-border-width-datepicker-focus, 2px);
|
|
81
|
+
|
|
82
|
+
/* Shadows - theme-aware */
|
|
83
|
+
--nuraly-datepicker-local-shadow-color: var(--nuraly-color-datepicker-shadow, rgba(0, 0, 0, 0.1));
|
|
84
|
+
--nuraly-datepicker-local-box-shadow: var(--nuraly-shadow-datepicker-box, 0 6px 16px 0 var(--nuraly-datepicker-local-shadow-color));
|
|
85
|
+
--nuraly-datepicker-local-input-focus-shadow: var(--nuraly-shadow-datepicker-input-focus, 0 0 0 2px rgba(22, 119, 255, 0.2));
|
|
86
|
+
|
|
87
|
+
/* States - theme-aware */
|
|
88
|
+
--nuraly-datepicker-local-hover-opacity: var(--nuraly-opacity-datepicker-hover, 0.8);
|
|
89
|
+
|
|
90
|
+
/* Animation and transitions - theme-aware */
|
|
91
|
+
--nuraly-datepicker-local-transition-duration: var(--nuraly-transition-duration-datepicker, 0.2s);
|
|
92
|
+
--nuraly-datepicker-local-transition-timing: var(--nuraly-transition-timing-datepicker, ease-in-out);
|
|
93
|
+
--nuraly-datepicker-local-calendar-animation-duration: var(--nuraly-transition-duration-datepicker-calendar, 0.15s);
|
|
94
|
+
|
|
95
|
+
/* Z-index - theme-aware */
|
|
96
|
+
--nuraly-datepicker-local-calendar-z-index: var(--nuraly-z-index-datepicker-calendar, 1000);
|
|
97
|
+
|
|
98
|
+
/* Icon sizes - theme-aware */
|
|
99
|
+
--nuraly-datepicker-local-icon-size: var(--nuraly-size-datepicker-icon, 16px);
|
|
100
|
+
--nuraly-datepicker-local-arrow-icon-size: var(--nuraly-size-datepicker-arrow-icon, 12px);
|
|
101
|
+
|
|
102
|
+
/* Size variants - theme-aware */
|
|
103
|
+
--nuraly-datepicker-local-small-font-size: var(--nuraly-font-size-datepicker-small, 12px);
|
|
104
|
+
--nuraly-datepicker-local-small-padding: var(--nuraly-spacing-datepicker-small-padding, 6px 8px);
|
|
105
|
+
--nuraly-datepicker-local-small-height: var(--nuraly-size-datepicker-small-height, 32px);
|
|
106
|
+
--nuraly-datepicker-local-small-day-size: var(--nuraly-size-datepicker-small-day, 28px);
|
|
107
|
+
|
|
108
|
+
--nuraly-datepicker-local-medium-font-size: var(--nuraly-font-size-datepicker-medium, 14px);
|
|
109
|
+
--nuraly-datepicker-local-medium-padding: var(--nuraly-spacing-datepicker-medium-padding, 8px 12px);
|
|
110
|
+
--nuraly-datepicker-local-medium-height: var(--nuraly-size-datepicker-medium-height, 36px);
|
|
111
|
+
--nuraly-datepicker-local-medium-day-size: var(--nuraly-size-datepicker-medium-day, 36px);
|
|
112
|
+
|
|
113
|
+
--nuraly-datepicker-local-large-font-size: var(--nuraly-font-size-datepicker-large, 16px);
|
|
114
|
+
--nuraly-datepicker-local-large-padding: var(--nuraly-spacing-datepicker-large-padding, 12px 16px);
|
|
115
|
+
--nuraly-datepicker-local-large-height: var(--nuraly-size-datepicker-large-height, 44px);
|
|
116
|
+
--nuraly-datepicker-local-large-day-size: var(--nuraly-size-datepicker-large-day, 44px);
|
|
113
117
|
}
|
|
114
118
|
`;
|
|
115
119
|
//# sourceMappingURL=datepicker.style.variables.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.style.variables.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.style.variables.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"datepicker.style.variables.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n :host {\n /* ========================================\n * DATEPICKER THEME-AWARE VARIABLES\n * Uses CSS custom properties from theme files\n * ======================================== */\n\n /* Base datepicker styling - uses theme variables with fallbacks */\n --nuraly-datepicker-local-background-color: var(--nuraly-color-datepicker-background, #ffffff);\n --nuraly-datepicker-local-text-color: var(--nuraly-color-datepicker-text, #000000);\n --nuraly-datepicker-local-font-family: var(--nuraly-font-family-datepicker, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n --nuraly-datepicker-local-font-size: var(--nuraly-font-size-datepicker, 14px);\n \n /* Datepicker borders - theme-aware */\n --nuraly-datepicker-local-border-color: var(--nuraly-color-datepicker-border, #d9d9d9);\n --nuraly-datepicker-local-border-width: var(--nuraly-border-width-datepicker, 1px);\n --nuraly-datepicker-local-border-radius: var(--nuraly-border-radius-datepicker, 8px);\n \n /* Primary and selection colors - theme-aware */\n --nuraly-datepicker-local-primary-color: var(--nuraly-color-datepicker-primary, #1677ff);\n --nuraly-datepicker-local-selected-color: var(--nuraly-color-datepicker-selected, #1677ff);\n --nuraly-datepicker-local-selected-text-color: var(--nuraly-color-datepicker-selected-text, #ffffff);\n --nuraly-datepicker-local-hover-color: var(--nuraly-color-datepicker-hover, #f5f5f5);\n --nuraly-datepicker-local-today-color: var(--nuraly-color-datepicker-today, #1677ff);\n \n /* Disabled states - theme-aware */\n --nuraly-datepicker-local-disabled-color: var(--nuraly-color-datepicker-disabled, #f5f5f5);\n --nuraly-datepicker-local-disabled-text-color: var(--nuraly-color-datepicker-disabled-text, #bfbfbf);\n --nuraly-datepicker-local-disabled-opacity: var(--nuraly-opacity-datepicker-disabled, 0.5);\n \n /* Input field colors - theme-aware */\n --nuraly-datepicker-local-input-background: var(--nuraly-color-datepicker-input-background, #ffffff);\n --nuraly-datepicker-local-input-border-color: var(--nuraly-color-datepicker-input-border, #d9d9d9);\n --nuraly-datepicker-local-input-focus-border-color: var(--nuraly-color-datepicker-input-focus-border, #1677ff);\n --nuraly-datepicker-local-input-text-color: var(--nuraly-color-datepicker-input-text, #000000);\n --nuraly-datepicker-local-input-placeholder-color: var(--nuraly-color-datepicker-input-placeholder, #bfbfbf);\n \n /* Special date colors - theme-aware */\n --nuraly-datepicker-local-weekend-color: var(--nuraly-color-datepicker-weekend, #ff4d4f);\n --nuraly-datepicker-local-weekday-color: var(--nuraly-color-datepicker-weekday, #8c8c8c);\n --nuraly-datepicker-local-range-color: var(--nuraly-color-datepicker-range, rgba(22, 119, 255, 0.1));\n --nuraly-datepicker-local-error-color: var(--nuraly-color-datepicker-error, #da1e28);\n --nuraly-datepicker-local-warning-color: var(--nuraly-color-datepicker-warning, #f0c300);\n --nuraly-datepicker-local-success-color: var(--nuraly-color-datepicker-success, #24a148);\n \n /* Header specific colors - theme-aware */\n --nuraly-datepicker-local-header-background: var(--nuraly-color-datepicker-header-background, #ffffff);\n --nuraly-datepicker-local-hover-background: var(--nuraly-color-datepicker-hover-background, rgba(0, 0, 0, 0.04));\n --nuraly-datepicker-local-active-background: var(--nuraly-color-datepicker-active-background, rgba(0, 0, 0, 0.06));\n \n /* Layout and sizing - theme-aware */\n --nuraly-datepicker-local-width: var(--nuraly-size-datepicker-width, 280px);\n --nuraly-datepicker-local-height: var(--nuraly-size-datepicker-height, auto);\n --nuraly-datepicker-local-calendar-width: var(--nuraly-size-datepicker-calendar-width, 320px);\n --nuraly-datepicker-local-calendar-height: var(--nuraly-size-datepicker-calendar-height, auto);\n --nuraly-datepicker-local-day-size: var(--nuraly-size-datepicker-day, 36px);\n --nuraly-datepicker-local-header-height: var(--nuraly-size-datepicker-header-height, 56px);\n \n /* Typography - theme-aware */\n --nuraly-datepicker-local-font-weight: var(--nuraly-font-weight-datepicker, 400);\n --nuraly-datepicker-local-header-font-size: var(--nuraly-font-size-datepicker-header, 16px);\n --nuraly-datepicker-local-header-font-weight: var(--nuraly-font-weight-datepicker-header, 600);\n --nuraly-datepicker-local-day-font-size: var(--nuraly-font-size-datepicker-day, 14px);\n --nuraly-datepicker-local-input-font-size: var(--nuraly-font-size-datepicker-input, 14px);\n --nuraly-datepicker-local-label-font-size: var(--nuraly-font-size-datepicker-label, 14px);\n --nuraly-datepicker-local-helper-font-size: var(--nuraly-font-size-datepicker-helper, 12px);\n --nuraly-datepicker-local-message-font-size: var(--nuraly-font-size-datepicker-message, 12px);\n \n /* Spacing - theme-aware */\n --nuraly-datepicker-local-gap: var(--nuraly-spacing-datepicker-gap, 6px);\n --nuraly-datepicker-local-calendar-padding: var(--nuraly-spacing-datepicker-calendar-padding, 12px);\n --nuraly-datepicker-local-day-padding: var(--nuraly-spacing-datepicker-day-padding, 6px);\n --nuraly-datepicker-local-input-padding: var(--nuraly-spacing-datepicker-input-padding, 8px 12px);\n --nuraly-datepicker-local-padding: var(--nuraly-spacing-datepicker-padding, 16px);\n --nuraly-datepicker-local-margin: var(--nuraly-spacing-datepicker-margin, 0);\n \n /* Borders - theme-aware */\n --nuraly-datepicker-local-input-border-width: var(--nuraly-border-width-datepicker-input, 1px);\n --nuraly-datepicker-local-focus-border-width: var(--nuraly-border-width-datepicker-focus, 2px);\n \n /* Shadows - theme-aware */\n --nuraly-datepicker-local-shadow-color: var(--nuraly-color-datepicker-shadow, rgba(0, 0, 0, 0.1));\n --nuraly-datepicker-local-box-shadow: var(--nuraly-shadow-datepicker-box, 0 6px 16px 0 var(--nuraly-datepicker-local-shadow-color));\n --nuraly-datepicker-local-input-focus-shadow: var(--nuraly-shadow-datepicker-input-focus, 0 0 0 2px rgba(22, 119, 255, 0.2));\n \n /* States - theme-aware */\n --nuraly-datepicker-local-hover-opacity: var(--nuraly-opacity-datepicker-hover, 0.8);\n \n /* Animation and transitions - theme-aware */\n --nuraly-datepicker-local-transition-duration: var(--nuraly-transition-duration-datepicker, 0.2s);\n --nuraly-datepicker-local-transition-timing: var(--nuraly-transition-timing-datepicker, ease-in-out);\n --nuraly-datepicker-local-calendar-animation-duration: var(--nuraly-transition-duration-datepicker-calendar, 0.15s);\n \n /* Z-index - theme-aware */\n --nuraly-datepicker-local-calendar-z-index: var(--nuraly-z-index-datepicker-calendar, 1000);\n \n /* Icon sizes - theme-aware */\n --nuraly-datepicker-local-icon-size: var(--nuraly-size-datepicker-icon, 16px);\n --nuraly-datepicker-local-arrow-icon-size: var(--nuraly-size-datepicker-arrow-icon, 12px);\n \n /* Size variants - theme-aware */\n --nuraly-datepicker-local-small-font-size: var(--nuraly-font-size-datepicker-small, 12px);\n --nuraly-datepicker-local-small-padding: var(--nuraly-spacing-datepicker-small-padding, 6px 8px);\n --nuraly-datepicker-local-small-height: var(--nuraly-size-datepicker-small-height, 32px);\n --nuraly-datepicker-local-small-day-size: var(--nuraly-size-datepicker-small-day, 28px);\n \n --nuraly-datepicker-local-medium-font-size: var(--nuraly-font-size-datepicker-medium, 14px);\n --nuraly-datepicker-local-medium-padding: var(--nuraly-spacing-datepicker-medium-padding, 8px 12px);\n --nuraly-datepicker-local-medium-height: var(--nuraly-size-datepicker-medium-height, 36px);\n --nuraly-datepicker-local-medium-day-size: var(--nuraly-size-datepicker-medium-day, 36px);\n \n --nuraly-datepicker-local-large-font-size: var(--nuraly-font-size-datepicker-large, 16px);\n --nuraly-datepicker-local-large-padding: var(--nuraly-spacing-datepicker-large-padding, 12px 16px);\n --nuraly-datepicker-local-large-height: var(--nuraly-size-datepicker-large-height, 44px);\n --nuraly-datepicker-local-large-day-size: var(--nuraly-size-datepicker-large-day, 44px);\n }\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"datepicker.types.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAkFH;;GAEG;AACH,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,6BAAW,CAAA;IACX,iCAAe,CAAA;IACf,+BAAa,CAAA;IACb,mCAAiB,CAAA;AACnB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,mCAAiB,CAAA;IACjB,iCAAe,CAAA;IACf,uCAAqB,CAAA;AACvB,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,mCAAiB,CAAA;IACjB,iCAAe,CAAA;AACjB,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,wCAAmB,CAAA;IACnB,0CAAqB,CAAA;IACrB,sCAAiB,CAAA;AACnB,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,gBAOX;AAPD,WAAY,gBAAgB;IAC1B,sCAAkB,CAAA;IAClB,qCAAiB,CAAA;IACjB,qCAAiB,CAAA;IACjB,sCAAkB,CAAA;IAClB,yCAAqB,CAAA;IACrB,0CAAsB,CAAA;AACxB,CAAC,EAPW,gBAAgB,KAAhB,gBAAgB,QAO3B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC7B,wCAAiB,CAAA;IACjB,kCAAW,CAAA;IACX,oCAAa,CAAA;AACf,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,IAKX;AALD,WAAY,IAAI;IACd,mBAAW,CAAA;IACX,uBAAe,CAAA;IACf,qBAAa,CAAA;IACb,yBAAiB,CAAA;AACnB,CAAC,EALW,IAAI,KAAJ,IAAI,QAKf","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Date picker option type for individual date selections\n */\nexport type DatePickerOption = {\n value: string;\n label: string;\n date: Date;\n disabled?: boolean;\n state?: DatePickerState;\n message?: string;\n htmlContent?: string;\n className?: string;\n style?: string;\n title?: string;\n id?: string;\n};\n\n/**\n * State types for date picker validation and feedback\n */\nexport type DatePickerState = 'error' | 'warning' | 'success';\n\n/**\n * Navigation date structure for date picker\n */\nexport interface INavigationDate {\n start: {\n year: number;\n month: number;\n day: number;\n };\n end?: {\n year: number;\n month: number;\n day: number;\n };\n}\n\n/**\n * Day presentation structure for calendar rendering\n */\nexport interface IDayPresentation {\n date: number;\n day: number;\n dayString: string;\n month: number;\n valid: number;\n year: number;\n timestamp: number;\n isToday?: boolean;\n isSelected?: boolean;\n isInRange?: boolean;\n isDisabled?: boolean;\n state?: DatePickerState;\n}\n\n/**\n * Day information for month calculations\n */\nexport interface IDayInfo {\n dayIndex: number;\n numberOfDays: number;\n firstDay: number;\n year: number;\n month: number;\n days: string[];\n}\n\n/**\n * Raw date object for internal state management\n */\nexport interface DateRawObject {\n currentYear: number;\n currentMonth: number;\n currentDay: number;\n endYear?: number;\n endMonth?: number;\n endDay?: number;\n}\n\n/**\n * Date picker modes enumeration\n */\nexport enum DatePickerMode {\n Day = 'day',\n Month = 'month', \n Year = 'year',\n Decade = 'decade',\n}\n\n/**\n * Date picker types enumeration\n */\nexport enum DatePickerType {\n Single = 'single',\n Range = 'range',\n Multiple = 'multiple',\n}\n\n/**\n * Date picker size enumeration\n */\nexport enum DatePickerSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\n/**\n * Date picker variant enumeration\n */\nexport enum DatePickerVariant {\n Default = 'default',\n Outlined = 'outlined',\n Filled = 'filled',\n}\n\n/**\n * Date format patterns\n */\nexport enum DatePickerFormat {\n ISO = 'YYYY-MM-DD',\n US = 'MM/DD/YYYY',\n EU = 'DD/MM/YYYY',\n Short = 'DD/MM/YY',\n Long = 'DD MMMM YYYY',\n Medium = 'DD MMM YYYY',\n}\n\n/**\n * Date picker placement options\n */\nexport enum DatePickerPlacement {\n Bottom = 'bottom',\n Top = 'top',\n Auto = 'auto',\n}\n\n/**\n * Legacy compatibility - keeping original Mode enum\n * @deprecated Use DatePickerMode instead\n */\nexport enum Mode {\n Day = 'day',\n Month = 'month',\n Year = 'year', \n Decade = 'decade',\n}\n"]}
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/datepicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/datepicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './datepicker.component.js';\nexport * from './datepicker.types.js';\nexport * from './controllers/index.js';\n"]}
|
package/package.json
CHANGED
package/react.js
CHANGED
|
@@ -7,7 +7,7 @@ import React from 'react';
|
|
|
7
7
|
import { createComponent } from '@lit-labs/react';
|
|
8
8
|
import { HyDatePickerElement } from './datepicker.component.js';
|
|
9
9
|
export const HyDatepicker = createComponent({
|
|
10
|
-
tagName: '
|
|
10
|
+
tagName: 'nr-datepicker',
|
|
11
11
|
elementClass: HyDatePickerElement,
|
|
12
12
|
react: React,
|
|
13
13
|
events: {
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/datepicker/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,YAAY,EAAE,gBAAgB;QAC9B,aAAa,EAAE,iBAAiB;QAChC,cAAc,EAAE,kBAAkB;QAClC,eAAe,EAAE,mBAAmB;QACpC,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,eAAe;KAC9B;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HyDatePickerElement } from './datepicker.component.js';\n\nexport const HyDatepicker = createComponent({\n tagName: '
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/datepicker/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,eAAe;IACxB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,YAAY,EAAE,gBAAgB;QAC9B,aAAa,EAAE,iBAAiB;QAChC,cAAc,EAAE,kBAAkB;QAClC,eAAe,EAAE,mBAAmB;QACpC,OAAO,EAAE,UAAU;QACnB,MAAM,EAAE,SAAS;QACjB,YAAY,EAAE,eAAe;KAC9B;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HyDatePickerElement } from './datepicker.component.js';\n\nexport const HyDatepicker = createComponent({\n tagName: 'nr-datepicker',\n elementClass: HyDatePickerElement,\n react: React,\n events: {\n onDateChange: 'nr-date-change',\n onRangeChange: 'nr-range-change',\n onCalendarOpen: 'nr-calendar-open',\n onCalendarClose: 'nr-calendar-close',\n onFocus: 'nr-focus',\n onBlur: 'nr-blur',\n onValidation: 'nr-validation',\n },\n});\n"]}
|
package/datepicker.type.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.type.js","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.type.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAkFH;;GAEG;AACH,MAAM,CAAN,IAAY,cAKX;AALD,WAAY,cAAc;IACxB,6BAAW,CAAA;IACX,iCAAe,CAAA;IACf,+BAAa,CAAA;IACb,mCAAiB,CAAA;AACnB,CAAC,EALW,cAAc,KAAd,cAAc,QAKzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,mCAAiB,CAAA;IACjB,iCAAe,CAAA;IACf,uCAAqB,CAAA;AACvB,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,cAIX;AAJD,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,mCAAiB,CAAA;IACjB,iCAAe,CAAA;AACjB,CAAC,EAJW,cAAc,KAAd,cAAc,QAIzB;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,wCAAmB,CAAA;IACnB,0CAAqB,CAAA;IACrB,sCAAiB,CAAA;AACnB,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,gBAOX;AAPD,WAAY,gBAAgB;IAC1B,sCAAkB,CAAA;IAClB,qCAAiB,CAAA;IACjB,qCAAiB,CAAA;IACjB,sCAAkB,CAAA;IAClB,yCAAqB,CAAA;IACrB,0CAAsB,CAAA;AACxB,CAAC,EAPW,gBAAgB,KAAhB,gBAAgB,QAO3B;AAED;;GAEG;AACH,MAAM,CAAN,IAAY,mBAIX;AAJD,WAAY,mBAAmB;IAC7B,wCAAiB,CAAA;IACjB,kCAAW,CAAA;IACX,oCAAa,CAAA;AACf,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;AAED;;;GAGG;AACH,MAAM,CAAN,IAAY,IAKX;AALD,WAAY,IAAI;IACd,mBAAW,CAAA;IACX,uBAAe,CAAA;IACf,qBAAa,CAAA;IACb,yBAAiB,CAAA;AACnB,CAAC,EALW,IAAI,KAAJ,IAAI,QAKf","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Date picker option type for individual date selections\n */\nexport type DatePickerOption = {\n value: string;\n label: string;\n date: Date;\n disabled?: boolean;\n state?: DatePickerState;\n message?: string;\n htmlContent?: string;\n className?: string;\n style?: string;\n title?: string;\n id?: string;\n};\n\n/**\n * State types for date picker validation and feedback\n */\nexport type DatePickerState = 'error' | 'warning' | 'success';\n\n/**\n * Navigation date structure for date picker\n */\nexport interface INavigationDate {\n start: {\n year: number;\n month: number;\n day: number;\n };\n end?: {\n year: number;\n month: number;\n day: number;\n };\n}\n\n/**\n * Day presentation structure for calendar rendering\n */\nexport interface IDayPresentation {\n date: number;\n day: number;\n dayString: string;\n month: number;\n valid: number;\n year: number;\n timestamp: number;\n isToday?: boolean;\n isSelected?: boolean;\n isInRange?: boolean;\n isDisabled?: boolean;\n state?: DatePickerState;\n}\n\n/**\n * Day information for month calculations\n */\nexport interface IDayInfo {\n dayIndex: number;\n numberOfDays: number;\n firstDay: number;\n year: number;\n month: number;\n days: string[];\n}\n\n/**\n * Raw date object for internal state management\n */\nexport interface DateRawObject {\n currentYear: number;\n currentMonth: number;\n currentDay: number;\n endYear?: number;\n endMonth?: number;\n endDay?: number;\n}\n\n/**\n * Date picker modes enumeration\n */\nexport enum DatePickerMode {\n Day = 'day',\n Month = 'month', \n Year = 'year',\n Decade = 'decade',\n}\n\n/**\n * Date picker types enumeration\n */\nexport enum DatePickerType {\n Single = 'single',\n Range = 'range',\n Multiple = 'multiple',\n}\n\n/**\n * Date picker size enumeration\n */\nexport enum DatePickerSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\n/**\n * Date picker variant enumeration\n */\nexport enum DatePickerVariant {\n Default = 'default',\n Outlined = 'outlined',\n Filled = 'filled',\n}\n\n/**\n * Date format patterns\n */\nexport enum DatePickerFormat {\n ISO = 'YYYY-MM-DD',\n US = 'MM/DD/YYYY',\n EU = 'DD/MM/YYYY',\n Short = 'DD/MM/YY',\n Long = 'DD MMMM YYYY',\n Medium = 'DD MMM YYYY',\n}\n\n/**\n * Date picker placement options\n */\nexport enum DatePickerPlacement {\n Bottom = 'bottom',\n Top = 'top',\n Auto = 'auto',\n}\n\n/**\n * Legacy compatibility - keeping original Mode enum\n * @deprecated Use DatePickerMode instead\n */\nexport enum Mode {\n Day = 'day',\n Month = 'month',\n Year = 'year', \n Decade = 'decade',\n}\n"]}
|