@genesislcap/foundation-ui 14.276.2-FUI-2341.1 → 14.276.2

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.
@@ -12901,7 +12901,7 @@
12901
12901
  "type": {
12902
12902
  "text": "ElementStyles"
12903
12903
  },
12904
- "default": "css`\n :host {\n position: relative;\n }\n\n .date-toggle::part(control) {\n cursor: pointer;\n }\n\n .date-toggle::part(label) {\n cursor: pointer;\n }\n\n .calendar-dropdown {\n display: none;\n width: 300px;\n z-index: 999;\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translate(-50%, 8px);\n margin: 10px 0 0;\n padding: 20px;\n background: var(--neutral-fill-rest);\n border-radius: calc(var(--control-corner-radius) * 1px);\n box-shadow: 0 0 8px rgb(0 0 0 / 20%);\n }\n\n .calendar-dropdown.hide-weekends {\n width: 215px;\n }\n\n .calendar-dropdown.top {\n top: auto;\n bottom: 100%;\n margin: 0 0 5px;\n transform: translate(-50%, -8px);\n }\n\n .calendar-dropdown.left {\n top: 50%;\n left: 0;\n margin: 0 0 0 5px;\n transform: translate(calc(-8px + -100%), -50%);\n }\n\n .calendar-dropdown.right {\n top: 50%;\n left: 100%;\n transform: translate(8px, -50%);\n }\n\n .calendar-dropdown.visible {\n display: block;\n }\n\n .calendar-dropdown.inline {\n display: block;\n position: static;\n margin-top: 5px;\n transform: none;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 0 10px;\n }\n\n .header h3 {\n margin: 0;\n text-transform: capitalize;\n font-weight: bold;\n color: var(--neutral-foreground-rest);\n }\n\n .header .icon-button {\n height: auto;\n padding: 0;\n min-width: auto;\n }\n\n .header .months-arrows {\n display: flex;\n gap: calc(var(--design-unit) * 2px);\n }\n\n .week-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-gap: 5px;\n margin-bottom: 10px;\n color: var(--neutral-foreground-rest);\n }\n\n .week-days span {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 14px;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n .week-days span.disabled {\n opacity: 60%;\n }\n\n .month-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-gap: 5px;\n }\n\n .week-days.hide-weekends,\n .month-days.hide-weekends {\n grid-template-columns: repeat(5, 1fr);\n }\n\n .month-day {\n padding: 8px 5px;\n color: #808080;\n background: none;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: calc(var(--control-corner-radius) * 4px);\n cursor: pointer;\n border: none;\n }\n\n .month-day.current {\n opacity: 100%;\n color: var(--neutral-foreground-hint);\n }\n\n .month-day.selected {\n background: var(--accent-foreground-rest);\n color: var(--neutral-foreground-rest);\n }\n\n .month-day:hover:not(:disabled) {\n background: var(--neutral-stroke-hover);\n color: var(--neutral-foreground-rest);\n }\n\n .month-day[disabled] {\n opacity: 50%;\n cursor: not-allowed;\n }\n\n .date-toggle[readonly] .label {\n cursor: pointer;\n }\n`"
12904
+ "default": "css`\n :host {\n position: relative;\n }\n\n .date-toggle::part(control) {\n cursor: pointer;\n }\n\n .date-toggle::part(label) {\n cursor: pointer;\n }\n\n .calendar-dropdown {\n display: none;\n width: 300px;\n z-index: 999;\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translate(-50%, 8px);\n margin: 10px 0 0;\n padding: 20px;\n background: var(--neutral-foreground-rest);\n border-radius: calc(var(--control-corner-radius) * 1px);\n box-shadow: 0 0 8px rgb(0 0 0 / 20%);\n }\n\n .calendar-dropdown.hide-weekends {\n width: 215px;\n }\n\n .calendar-dropdown.top {\n top: auto;\n bottom: 100%;\n margin: 0 0 5px;\n transform: translate(-50%, -8px);\n }\n\n .calendar-dropdown.left {\n top: 50%;\n left: 0;\n margin: 0 0 0 5px;\n transform: translate(calc(-8px + -100%), -50%);\n }\n\n .calendar-dropdown.right {\n top: 50%;\n left: 100%;\n transform: translate(8px, -50%);\n }\n\n .calendar-dropdown.visible {\n display: block;\n }\n\n .calendar-dropdown.inline {\n display: block;\n position: static;\n margin-top: 5px;\n transform: none;\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 0 0 10px;\n }\n\n .header h3 {\n margin: 0;\n text-transform: capitalize;\n font-weight: bold;\n color: var(--foreground-on-accent-rest);\n }\n\n .header .months-arrows {\n display: flex;\n flex-direction: row;\n }\n\n .header .icon-container {\n display: flex;\n width: 25px;\n height: 25px;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n }\n\n .header .icon-container:first-child {\n margin-right: calc(var(--design-unit) * 2px);\n }\n\n .header .prev-month,\n .header .next-month {\n color: var(--foreground-on-accent-rest);\n font-size: 18px;\n }\n\n .week-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-gap: 5px;\n margin-bottom: 10px;\n color: var(--foreground-on-accent-rest);\n }\n\n .week-days span {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 14px;\n font-weight: bold;\n text-transform: capitalize;\n }\n\n .week-days span.disabled {\n opacity: 50%;\n }\n\n .month-days {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n grid-gap: 5px;\n }\n\n .week-days.hide-weekends,\n .month-days.hide-weekends {\n grid-template-columns: repeat(5, 1fr);\n }\n\n .month-day {\n padding: 8px 5px;\n color: #808080;\n background: none;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: calc(var(--control-corner-radius) * 4px);\n cursor: pointer;\n border: none;\n }\n\n .month-day.current {\n opacity: 100%;\n color: var(--foreground-on-accent-rest);\n }\n\n .month-day.selected {\n background: var(--accent-foreground-rest);\n color: var(--neutral-foreground-rest);\n }\n\n .month-day:hover:not(:disabled) {\n background: var(--neutral-stroke-hover);\n color: (--neutral-foreground-rest);\n }\n\n .month-day[disabled] {\n opacity: 50%;\n cursor: not-allowed;\n }\n\n .date-toggle[readonly] .label {\n cursor: pointer;\n }\n`"
12905
12905
  }
12906
12906
  ],
12907
12907
  "exports": [
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,0BAA0B,EAAE,aA2JxC,CAAC"}
1
+ {"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../src/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,eAAO,MAAM,0BAA0B,EAAE,aAwKxC,CAAC"}
@@ -22,7 +22,7 @@ export const foundationDatePickerStyles = css `
22
22
  transform: translate(-50%, 8px);
23
23
  margin: 10px 0 0;
24
24
  padding: 20px;
25
- background: var(--neutral-fill-rest);
25
+ background: var(--neutral-foreground-rest);
26
26
  border-radius: calc(var(--control-corner-radius) * 1px);
27
27
  box-shadow: 0 0 8px rgb(0 0 0 / 20%);
28
28
  }
@@ -73,18 +73,31 @@ export const foundationDatePickerStyles = css `
73
73
  margin: 0;
74
74
  text-transform: capitalize;
75
75
  font-weight: bold;
76
- color: var(--neutral-foreground-rest);
76
+ color: var(--foreground-on-accent-rest);
77
77
  }
78
78
 
79
- .header .icon-button {
80
- height: auto;
81
- padding: 0;
82
- min-width: auto;
79
+ .header .months-arrows {
80
+ display: flex;
81
+ flex-direction: row;
83
82
  }
84
83
 
85
- .header .months-arrows {
84
+ .header .icon-container {
86
85
  display: flex;
87
- gap: calc(var(--design-unit) * 2px);
86
+ width: 25px;
87
+ height: 25px;
88
+ justify-content: center;
89
+ align-items: center;
90
+ cursor: pointer;
91
+ }
92
+
93
+ .header .icon-container:first-child {
94
+ margin-right: calc(var(--design-unit) * 2px);
95
+ }
96
+
97
+ .header .prev-month,
98
+ .header .next-month {
99
+ color: var(--foreground-on-accent-rest);
100
+ font-size: 18px;
88
101
  }
89
102
 
90
103
  .week-days {
@@ -92,7 +105,7 @@ export const foundationDatePickerStyles = css `
92
105
  grid-template-columns: repeat(7, 1fr);
93
106
  grid-gap: 5px;
94
107
  margin-bottom: 10px;
95
- color: var(--neutral-foreground-rest);
108
+ color: var(--foreground-on-accent-rest);
96
109
  }
97
110
 
98
111
  .week-days span {
@@ -105,7 +118,7 @@ export const foundationDatePickerStyles = css `
105
118
  }
106
119
 
107
120
  .week-days span.disabled {
108
- opacity: 60%;
121
+ opacity: 50%;
109
122
  }
110
123
 
111
124
  .month-days {
@@ -133,7 +146,7 @@ export const foundationDatePickerStyles = css `
133
146
 
134
147
  .month-day.current {
135
148
  opacity: 100%;
136
- color: var(--neutral-foreground-hint);
149
+ color: var(--foreground-on-accent-rest);
137
150
  }
138
151
 
139
152
  .month-day.selected {
@@ -143,7 +156,7 @@ export const foundationDatePickerStyles = css `
143
156
 
144
157
  .month-day:hover:not(:disabled) {
145
158
  background: var(--neutral-stroke-hover);
146
- color: var(--neutral-foreground-rest);
159
+ color: (--neutral-foreground-rest);
147
160
  }
148
161
 
149
162
  .month-day[disabled] {
@@ -14,12 +14,12 @@ export const getPrefixedDatePicker = (prefix) => html `
14
14
  <div class="header">
15
15
  <h3>${(x) => x.currentMonth} ${(x) => x.currentYear}</h3>
16
16
  <div class="months-arrows">
17
- <${prefix}-button class="icon-button" appearance="accent" @click="${(x) => x.prevMonth()}" aria-label="previous month">
18
- <${prefix}-icon name="angle-left"></${prefix}-icon>
19
- </${prefix}-button>
20
- <${prefix}-button class="icon-button" appearance="accent" @click="${(x) => x.nextMonth()}" aria-label="next month">
21
- <${prefix}-icon name="angle-right"></${prefix}-icon>
22
- </${prefix}-button>
17
+ <div class="icon-container" @click="${(x) => x.prevMonth()}">
18
+ <${prefix}-icon name="angle-left" class="prev-month" aria-label="previous month"></${prefix}-icon>
19
+ </div>
20
+ <div class="icon-container" @click="${(x) => x.nextMonth()}">
21
+ <${prefix}-icon name="angle-right" class="next-month" aria-label="next month"></${prefix}-icon>
22
+ </div>
23
23
  </div>
24
24
  </div>
25
25
  <div class="week-days ${(x) => classNames(['hide-weekends', x.hideWeekends])}">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-ui",
3
3
  "description": "Genesis Foundation UI",
4
- "version": "14.276.2-FUI-2341.1",
4
+ "version": "14.276.2",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -83,13 +83,13 @@
83
83
  }
84
84
  },
85
85
  "devDependencies": {
86
- "@genesislcap/foundation-testing": "14.276.2-FUI-2341.1",
87
- "@genesislcap/genx": "14.276.2-FUI-2341.1",
88
- "@genesislcap/rollup-builder": "14.276.2-FUI-2341.1",
89
- "@genesislcap/ts-builder": "14.276.2-FUI-2341.1",
90
- "@genesislcap/uvu-playwright-builder": "14.276.2-FUI-2341.1",
91
- "@genesislcap/vite-builder": "14.276.2-FUI-2341.1",
92
- "@genesislcap/webpack-builder": "14.276.2-FUI-2341.1",
86
+ "@genesislcap/foundation-testing": "14.276.2",
87
+ "@genesislcap/genx": "14.276.2",
88
+ "@genesislcap/rollup-builder": "14.276.2",
89
+ "@genesislcap/ts-builder": "14.276.2",
90
+ "@genesislcap/uvu-playwright-builder": "14.276.2",
91
+ "@genesislcap/vite-builder": "14.276.2",
92
+ "@genesislcap/webpack-builder": "14.276.2",
93
93
  "copyfiles": "^2.4.1",
94
94
  "rimraf": "^5.0.0",
95
95
  "rxjs": "^7.5.4"
@@ -100,15 +100,15 @@
100
100
  "@fortawesome/free-regular-svg-icons": "^6.2.1",
101
101
  "@fortawesome/free-solid-svg-icons": "^6.2.1",
102
102
  "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
103
- "@genesislcap/expression-builder": "14.276.2-FUI-2341.1",
104
- "@genesislcap/foundation-comms": "14.276.2-FUI-2341.1",
105
- "@genesislcap/foundation-criteria": "14.276.2-FUI-2341.1",
106
- "@genesislcap/foundation-errors": "14.276.2-FUI-2341.1",
107
- "@genesislcap/foundation-events": "14.276.2-FUI-2341.1",
108
- "@genesislcap/foundation-logger": "14.276.2-FUI-2341.1",
109
- "@genesislcap/foundation-notifications": "14.276.2-FUI-2341.1",
110
- "@genesislcap/foundation-user": "14.276.2-FUI-2341.1",
111
- "@genesislcap/foundation-utils": "14.276.2-FUI-2341.1",
103
+ "@genesislcap/expression-builder": "14.276.2",
104
+ "@genesislcap/foundation-comms": "14.276.2",
105
+ "@genesislcap/foundation-criteria": "14.276.2",
106
+ "@genesislcap/foundation-errors": "14.276.2",
107
+ "@genesislcap/foundation-events": "14.276.2",
108
+ "@genesislcap/foundation-logger": "14.276.2",
109
+ "@genesislcap/foundation-notifications": "14.276.2",
110
+ "@genesislcap/foundation-user": "14.276.2",
111
+ "@genesislcap/foundation-utils": "14.276.2",
112
112
  "@microsoft/fast-colors": "5.3.1",
113
113
  "@microsoft/fast-components": "2.30.6",
114
114
  "@microsoft/fast-element": "1.14.0",
@@ -130,5 +130,5 @@
130
130
  "access": "public"
131
131
  },
132
132
  "customElements": "dist/custom-elements.json",
133
- "gitHead": "b5c855d5ba42f730f564462cf87be5d8d1e94b83"
133
+ "gitHead": "1a5e61af368b280d2219453375baf70a05b4eec6"
134
134
  }