@triptease/tt-calendar 6.3.0 → 6.4.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/dist/cjs/src/Styles.js
CHANGED
|
@@ -129,6 +129,7 @@ exports.styles = (0, lit_1.css) `
|
|
|
129
129
|
|
|
130
130
|
.day.in-range {
|
|
131
131
|
background: var(--tt-calendar-range-bg, var(--color-primary-300));
|
|
132
|
+
color: var(--tt-calendar-range-color, inherit);
|
|
132
133
|
|
|
133
134
|
&:first-child {
|
|
134
135
|
border-top-left-radius: var(--space-scale-1);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA
|
|
1
|
+
{"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n color: var(--tt-calendar-range-color, inherit);\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
|
package/dist/esm/src/Styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n color: var(--tt-calendar-range-color, inherit);\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--tt-calendar-range-bg, var(--color-primary-300));\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent tt-calendar following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "@triptease",
|
|
6
|
-
"version": "6.
|
|
6
|
+
"version": "6.4.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist/esm",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@lit/context": "^1.1.5",
|
|
46
|
-
"@triptease/icons": "1.4.
|
|
46
|
+
"@triptease/icons": "1.4.2",
|
|
47
47
|
"@types/luxon": "^3.6.2",
|
|
48
48
|
"lit": "^3.1.4",
|
|
49
49
|
"luxon": "^3.6.1"
|