@ardium-ui/ui 3.5.1 → 3.5.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.
Files changed (20) hide show
  1. package/esm2022/lib/_internal/disablable-component.mjs +1 -1
  2. package/esm2022/lib/_internal/item-storages/dropdown-item-storage.mjs +5 -1
  3. package/esm2022/lib/_internal/item-storages/simple-item-storage.mjs +5 -1
  4. package/esm2022/lib/_internal/ngmodel-component.mjs +4 -2
  5. package/esm2022/lib/buttons/icon-button/icon-button.module.mjs +1 -1
  6. package/esm2022/lib/calendar/calendar.component.mjs +20 -7
  7. package/esm2022/lib/calendar/calendar.defaults.mjs +1 -1
  8. package/esm2022/lib/calendar/calendar.module.mjs +1 -1
  9. package/esm2022/lib/calendar/index.mjs +1 -1
  10. package/esm2022/lib/inputs/date-input/date-input.component.mjs +2 -2
  11. package/esm2022/lib/inputs/date-input/date-input.directive.mjs +1 -1
  12. package/esm2022/lib/inputs/date-input/date-input.module.mjs +1 -1
  13. package/esm2022/lib/inputs/date-input/date-input.types.mjs +1 -1
  14. package/esm2022/lib/inputs/date-input/index.mjs +1 -1
  15. package/esm2022/lib/inputs/digit-input/digit-input.module.mjs +1 -1
  16. package/fesm2022/ardium-ui-ui.mjs +29 -7
  17. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  18. package/package.json +1 -1
  19. package/themes/default/calendar-OLD.scss +183 -183
  20. package/themes/default/calendar.scss +204 -204
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ardium-ui/ui",
3
- "version": "3.5.1",
3
+ "version": "3.5.3",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
package/themes/default/calendar-OLD.scss CHANGED
@@ -1,183 +1,183 @@
1
- @use './dropdown-arrow.scss' as DA;
2
- @use './mixins.scss' as DM;
3
- @use './coloring.scss' as CM;
4
- @use '../variables' as ARD;
5
-
6
- .ard-calendar {
7
- @include CM.typeColors();
8
- width: 18.5rem;
9
- background: ARD.$bg;
10
- user-select: none;
11
-
12
- .ard-calendar-header-container {
13
- display: flex;
14
- align-items: center;
15
- justify-content: stretch;
16
-
17
- .ard-calendar-days-view-header {
18
- width: 100%;
19
- display: flex;
20
- justify-content: space-between;
21
-
22
- .ard-calendar-header-button .ard-button-content {
23
- display: flex;
24
- gap: 0.375rem;
25
- align-items: center;
26
-
27
- .ard-dropdown-arrow {
28
- @include DA.dropdown-arrow();
29
- }
30
- }
31
- .ard-calendar-arrows {
32
- display: flex;
33
- gap: 0.375rem;
34
-
35
- > ard-fab {
36
- margin: 0;
37
- }
38
- }
39
- }
40
- }
41
- //! main container
42
- .ard-calendar-main-container {
43
- padding: 0.375rem;
44
- padding-top: 0;
45
- }
46
- //! calendar entries
47
- .ard-calendar-entry {
48
- z-index: 1;
49
- cursor: pointer;
50
- outline: none;
51
-
52
- .ard-calendar-entry-button {
53
- $_margin: 0.125rem;
54
- background: transparent;
55
- border: 1px solid transparent;
56
- width: calc(100% - #{$_margin * 2});
57
- height: calc(100% - #{$_margin * 2});
58
- padding: 0;
59
- position: relative;
60
- border-radius: 9999px;
61
- cursor: pointer;
62
- margin: $_margin;
63
-
64
- .ard-focus-overlay {
65
- @include DM.focus-overlay();
66
- z-index: -1;
67
- background: var(--ard-cmpcl--bg-colored);
68
- border: 2px solid transparent;
69
- transition:
70
- border-color 0.2s ease,
71
- opacity 0.2s ease;
72
- }
73
- }
74
- &.ard-calendar-entry-empty {
75
- cursor: default;
76
- pointer-events: none;
77
- }
78
- &.ard-calendar-today {
79
- .ard-calendar-entry-button {
80
- border-color: ARD.$detail;
81
- }
82
- }
83
- &.ard-calendar-entry-highlighted {
84
- .ard-focus-overlay {
85
- opacity: 20%;
86
- }
87
- }
88
- &.ard-calendar-entry-selected {
89
- .ard-calendar-entry-button {
90
- color: var(--ard-cmpcl--on-bg-colored);
91
- }
92
- .ard-focus-overlay {
93
- opacity: 100%;
94
- }
95
-
96
- &.ard-calendar-today {
97
- .ard-focus-overlay {
98
- border-color: ARD.$bg;
99
- }
100
- }
101
- }
102
- }
103
- //! days view
104
- .ard-calendar-grid {
105
- display: grid;
106
- grid-template-columns: repeat(7, 1fr);
107
-
108
- > * {
109
- max-width: 100%;
110
- box-sizing: border-box;
111
- aspect-ratio: 1;
112
- }
113
- }
114
- .ard-calendar-day-labels {
115
- font-size: 0.8125rem;
116
- color: ARD.$text3;
117
- height: 1.25rem;
118
- position: relative;
119
-
120
- > * {
121
- display: flex;
122
- align-items: center;
123
- justify-content: center;
124
- aspect-ratio: unset;
125
- }
126
- &::after {
127
- content: '';
128
- position: absolute;
129
- width: 100%;
130
- height: 1px;
131
- background: ARD.$detail-ultralight;
132
- bottom: 0;
133
- }
134
- }
135
- .ard-calendar-main-grid {
136
- position: relative;
137
-
138
- &.ard-reserve-top-row {
139
- padding-top: 100% / 7;
140
- }
141
- .ard-calendar-floating-month {
142
- position: absolute;
143
- top: 0;
144
- left: 0;
145
- width: 100%;
146
- box-sizing: border-box;
147
- aspect-ratio: 7;
148
- padding-left: 0.5rem;
149
- display: flex;
150
- align-items: center;
151
- font-size: 0.875rem;
152
- font-weight: 500;
153
- color: ARD.$text3;
154
- letter-spacing: 0.5px;
155
- }
156
- }
157
- //! years & months view
158
- .ard-calendar-simple-grid {
159
- border-top: 1px solid ARD.$detail-ultralight;
160
- margin-top: 0.25rem;
161
- display: grid;
162
- grid-template-columns: repeat(4, 1fr);
163
- grid-template-rows: repeat(6, 1fr);
164
-
165
- > * {
166
- max-width: 100%;
167
- box-sizing: border-box;
168
- aspect-ratio: 7/4; //it has to be the same height as in the days view
169
- //before it was 7/7 (1) because there are 7 entries in a single row
170
- //now there are 4 entries, and thus 7/4
171
- }
172
- }
173
- //! interactions
174
- &.ard-calendar-nointeract {
175
- .ard-calendar-main-container {
176
- pointer-events: none;
177
- }
178
- }
179
- //! static height
180
- &.ard-calendar-static-height {
181
- height: 19.5rem;
182
- }
183
- }
1
+ @use './dropdown-arrow.scss' as DA;
2
+ @use './mixins.scss' as DM;
3
+ @use './coloring.scss' as CM;
4
+ @use '../variables' as ARD;
5
+
6
+ .ard-calendar {
7
+ @include CM.typeColors();
8
+ width: 18.5rem;
9
+ background: ARD.$bg;
10
+ user-select: none;
11
+
12
+ .ard-calendar-header-container {
13
+ display: flex;
14
+ align-items: center;
15
+ justify-content: stretch;
16
+
17
+ .ard-calendar-days-view-header {
18
+ width: 100%;
19
+ display: flex;
20
+ justify-content: space-between;
21
+
22
+ .ard-calendar-header-button .ard-button-content {
23
+ display: flex;
24
+ gap: 0.375rem;
25
+ align-items: center;
26
+
27
+ .ard-dropdown-arrow {
28
+ @include DA.dropdown-arrow();
29
+ }
30
+ }
31
+ .ard-calendar-arrows {
32
+ display: flex;
33
+ gap: 0.375rem;
34
+
35
+ > ard-fab {
36
+ margin: 0;
37
+ }
38
+ }
39
+ }
40
+ }
41
+ //! main container
42
+ .ard-calendar-main-container {
43
+ padding: 0.375rem;
44
+ padding-top: 0;
45
+ }
46
+ //! calendar entries
47
+ .ard-calendar-entry {
48
+ z-index: 1;
49
+ cursor: pointer;
50
+ outline: none;
51
+
52
+ .ard-calendar-entry-button {
53
+ $_margin: 0.125rem;
54
+ background: transparent;
55
+ border: 1px solid transparent;
56
+ width: calc(100% - #{$_margin * 2});
57
+ height: calc(100% - #{$_margin * 2});
58
+ padding: 0;
59
+ position: relative;
60
+ border-radius: 9999px;
61
+ cursor: pointer;
62
+ margin: $_margin;
63
+
64
+ .ard-focus-overlay {
65
+ @include DM.focus-overlay();
66
+ z-index: -1;
67
+ background: var(--ard-cmpcl--bg-colored);
68
+ border: 2px solid transparent;
69
+ transition:
70
+ border-color 0.2s ease,
71
+ opacity 0.2s ease;
72
+ }
73
+ }
74
+ &.ard-calendar-entry-empty {
75
+ cursor: default;
76
+ pointer-events: none;
77
+ }
78
+ &.ard-calendar-today {
79
+ .ard-calendar-entry-button {
80
+ border-color: ARD.$detail;
81
+ }
82
+ }
83
+ &.ard-calendar-entry-highlighted {
84
+ .ard-focus-overlay {
85
+ opacity: 20%;
86
+ }
87
+ }
88
+ &.ard-calendar-entry-selected {
89
+ .ard-calendar-entry-button {
90
+ color: var(--ard-cmpcl--on-bg-colored);
91
+ }
92
+ .ard-focus-overlay {
93
+ opacity: 100%;
94
+ }
95
+
96
+ &.ard-calendar-today {
97
+ .ard-focus-overlay {
98
+ border-color: ARD.$bg;
99
+ }
100
+ }
101
+ }
102
+ }
103
+ //! days view
104
+ .ard-calendar-grid {
105
+ display: grid;
106
+ grid-template-columns: repeat(7, 1fr);
107
+
108
+ > * {
109
+ max-width: 100%;
110
+ box-sizing: border-box;
111
+ aspect-ratio: 1;
112
+ }
113
+ }
114
+ .ard-calendar-day-labels {
115
+ font-size: 0.8125rem;
116
+ color: ARD.$text3;
117
+ height: 1.25rem;
118
+ position: relative;
119
+
120
+ > * {
121
+ display: flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ aspect-ratio: unset;
125
+ }
126
+ &::after {
127
+ content: '';
128
+ position: absolute;
129
+ width: 100%;
130
+ height: 1px;
131
+ background: ARD.$detail-ultralight;
132
+ bottom: 0;
133
+ }
134
+ }
135
+ .ard-calendar-main-grid {
136
+ position: relative;
137
+
138
+ &.ard-reserve-top-row {
139
+ padding-top: 100% / 7;
140
+ }
141
+ .ard-calendar-floating-month {
142
+ position: absolute;
143
+ top: 0;
144
+ left: 0;
145
+ width: 100%;
146
+ box-sizing: border-box;
147
+ aspect-ratio: 7;
148
+ padding-left: 0.5rem;
149
+ display: flex;
150
+ align-items: center;
151
+ font-size: 0.875rem;
152
+ font-weight: 500;
153
+ color: ARD.$text3;
154
+ letter-spacing: 0.5px;
155
+ }
156
+ }
157
+ //! years & months view
158
+ .ard-calendar-simple-grid {
159
+ border-top: 1px solid ARD.$detail-ultralight;
160
+ margin-top: 0.25rem;
161
+ display: grid;
162
+ grid-template-columns: repeat(4, 1fr);
163
+ grid-template-rows: repeat(6, 1fr);
164
+
165
+ > * {
166
+ max-width: 100%;
167
+ box-sizing: border-box;
168
+ aspect-ratio: 7/4; //it has to be the same height as in the days view
169
+ //before it was 7/7 (1) because there are 7 entries in a single row
170
+ //now there are 4 entries, and thus 7/4
171
+ }
172
+ }
173
+ //! interactions
174
+ &.ard-calendar-nointeract {
175
+ .ard-calendar-main-container {
176
+ pointer-events: none;
177
+ }
178
+ }
179
+ //! static height
180
+ &.ard-calendar-static-height {
181
+ height: 19.5rem;
182
+ }
183
+ }