overview-components 1.0.78 → 1.0.79
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/_virtual/_commonjsHelpers.js +6 -2
- package/dist/_virtual/air-datepicker.js +4 -0
- package/dist/index.d.ts +56 -11
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +105 -53
- package/dist/node_modules/@floating-ui/core/dist/floating-ui.core.js +285 -231
- package/dist/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +48 -47
- package/dist/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +39 -38
- package/dist/node_modules/air-datepicker/air-datepicker.js +1147 -0
- package/dist/node_modules/air-datepicker/index.es.js +4 -0
- package/dist/shared/filter-inputs.js +326 -0
- package/dist/shared/lit-case-variables-tab-cell.js +207 -0
- package/dist/shared/lit-custom-popper.js +99 -0
- package/dist/shared/lit-data-grid-action-buttons-popover.js +258 -0
- package/dist/shared/lit-data-grid-density-popover.js +79 -0
- package/dist/shared/lit-data-grid-export-popover.js +66 -0
- package/dist/shared/lit-data-grid-operators-popover.js +94 -0
- package/dist/shared/lit-data-grid-row-actions.js +73 -0
- package/dist/shared/lit-date-picker.js +525 -0
- package/dist/shared/lit-icon-button.d.ts +1 -1
- package/dist/shared/lit-icon-button.d.ts.map +1 -1
- package/dist/shared/lit-icon-button.js +91 -0
- package/dist/shared/lit-label.js +96 -0
- package/dist/shared/lit-loader.d.ts +1 -1
- package/dist/shared/lit-loader.d.ts.map +1 -1
- package/dist/shared/lit-loader.js +70 -0
- package/dist/shared/lit-loading-bar.d.ts +1 -1
- package/dist/shared/lit-loading-bar.d.ts.map +1 -1
- package/dist/shared/lit-loading-bar.js +94 -0
- package/dist/shared/lit-menu-item.d.ts +1 -1
- package/dist/shared/lit-menu-item.d.ts.map +1 -1
- package/dist/shared/lit-menu-item.js +94 -0
- package/dist/shared/lit-modal-body.js +28 -0
- package/dist/shared/lit-modal-footer.js +32 -0
- package/dist/shared/lit-modal-header.js +39 -0
- package/dist/shared/lit-overflow-tooltip.js +85 -0
- package/dist/shared/lit-responsive-button.js +84 -0
- package/dist/shared/lit-select-field.js +376 -0
- package/dist/shared/lit-settings.js +60 -0
- package/dist/shared/lit-text-field.d.ts +1 -1
- package/dist/shared/lit-text-field.d.ts.map +1 -1
- package/dist/shared/lit-text-field.js +205 -0
- package/dist/shared/lit-toggle.js +213 -0
- package/dist/shared/simple-popper.js +186 -0
- package/dist/shared/simple-tooltip.js +1 -1
- package/dist/style.css +1 -0
- package/dist/utils/localization.js +410 -25
- package/dist/utils/utils.js +11 -0
- package/package.json +1 -1
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
import { customElement as c } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
|
|
2
|
+
import { property as r } from "../node_modules/@lit/reactive-element/decorators/property.js";
|
|
3
|
+
import "../node_modules/@lit/reactive-element/reactive-element.js";
|
|
4
|
+
import { html as p } from "../node_modules/lit-html/lit-html.js";
|
|
5
|
+
import { LitElement as h } from "../node_modules/lit-element/lit-element.js";
|
|
6
|
+
import { css as b } from "../node_modules/@lit/reactive-element/css-tag.js";
|
|
7
|
+
var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, s, a, l) => {
|
|
8
|
+
for (var o = l > 1 ? void 0 : l ? f(s, a) : s, n = t.length - 1, d; n >= 0; n--)
|
|
9
|
+
(d = t[n]) && (o = (l ? d(s, a, o) : d(o)) || o);
|
|
10
|
+
return l && o && u(s, a, o), o;
|
|
11
|
+
};
|
|
12
|
+
let e = class extends h {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments), this.label = "", this.disabled = !1, this.error = !1, this.size = "medium", this.checked = !1, this.required = !1, this.onChange = () => {
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
_onChange(t) {
|
|
18
|
+
this.checked = t.target.checked, this._notifyChange(t);
|
|
19
|
+
}
|
|
20
|
+
_notifyChange(t) {
|
|
21
|
+
this.dispatchEvent(
|
|
22
|
+
new CustomEvent("change", {
|
|
23
|
+
bubbles: !0,
|
|
24
|
+
composed: !0,
|
|
25
|
+
detail: t.target.checked
|
|
26
|
+
})
|
|
27
|
+
), typeof this.onChange == "function" && this.onChange(t);
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
const t = [this.size, this.error ? "error" : ""].join(" ");
|
|
31
|
+
return p`
|
|
32
|
+
<div class="container">
|
|
33
|
+
${this.label ? p`
|
|
34
|
+
<lit-label
|
|
35
|
+
.label=${this.label}
|
|
36
|
+
?disabled=${this.disabled}
|
|
37
|
+
?error=${this.error}
|
|
38
|
+
?required=${this.required}
|
|
39
|
+
.tooltip=${this.tooltip}
|
|
40
|
+
>
|
|
41
|
+
</lit-label>
|
|
42
|
+
` : ""}
|
|
43
|
+
<div class="toggle-wrap">
|
|
44
|
+
<label class="switch ${t}">
|
|
45
|
+
<input
|
|
46
|
+
type="checkbox"
|
|
47
|
+
@change=${this._onChange}
|
|
48
|
+
.checked=${this.checked}
|
|
49
|
+
?disabled=${this.disabled}
|
|
50
|
+
/>
|
|
51
|
+
<span class="slider round"></span>
|
|
52
|
+
</label>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
e.styles = b`
|
|
59
|
+
.container {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
gap: 2px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.toggle-wrap {
|
|
66
|
+
margin: 4px 0 4px 14px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.switch {
|
|
70
|
+
position: relative;
|
|
71
|
+
display: inline-block;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.switch.medium {
|
|
75
|
+
width: 44px;
|
|
76
|
+
height: 22px;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.switch.small {
|
|
80
|
+
width: 32px;
|
|
81
|
+
height: 18px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Hide default HTML checkbox */
|
|
85
|
+
.switch input {
|
|
86
|
+
opacity: 0;
|
|
87
|
+
width: 0;
|
|
88
|
+
height: 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* The slider */
|
|
92
|
+
.slider {
|
|
93
|
+
position: absolute;
|
|
94
|
+
cursor: pointer;
|
|
95
|
+
top: 0;
|
|
96
|
+
left: 0;
|
|
97
|
+
right: 0;
|
|
98
|
+
bottom: 0;
|
|
99
|
+
background-color: #99a0ae;
|
|
100
|
+
-webkit-transition: 0.4s;
|
|
101
|
+
transition: 0.4s;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.slider:before {
|
|
105
|
+
position: absolute;
|
|
106
|
+
content: '';
|
|
107
|
+
background-color: var(--background-paper, #ffffff);
|
|
108
|
+
-webkit-transition: 0.4s;
|
|
109
|
+
transition: 0.4s;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
input:checked + .slider {
|
|
113
|
+
background-color: var(--color-primary-main, #76b703);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
input:focus + .slider {
|
|
117
|
+
box-shadow: 0 0 1px var(--color-primary-main, #76b703);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.switch.medium .slider:before {
|
|
121
|
+
height: 14px;
|
|
122
|
+
width: 14px;
|
|
123
|
+
left: 4px;
|
|
124
|
+
bottom: 4px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.switch.medium input:checked + .slider:before {
|
|
128
|
+
-webkit-transform: translateX(22px);
|
|
129
|
+
-ms-transform: translateX(22px);
|
|
130
|
+
transform: translateX(22px);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.switch.small .slider:before {
|
|
134
|
+
height: 12px;
|
|
135
|
+
width: 12px;
|
|
136
|
+
left: 3px;
|
|
137
|
+
bottom: 3px;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.switch.small input:checked + .slider:before {
|
|
141
|
+
-webkit-transform: translateX(14px);
|
|
142
|
+
-ms-transform: translateX(14px);
|
|
143
|
+
transform: translateX(14px);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* Rounded sliders */
|
|
147
|
+
.slider.round {
|
|
148
|
+
border-radius: 34px;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.slider.round:before {
|
|
152
|
+
border-radius: 50%;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.switch.disabled,
|
|
156
|
+
.switch input:disabled + .slider {
|
|
157
|
+
cursor: not-allowed;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.switch input:disabled + .slider {
|
|
161
|
+
background-color: #5d6371;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.switch input:checked:disabled + .slider {
|
|
165
|
+
background-color: #d0d3db;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.switch input:not(:checked):not(:disabled):hover + .slider {
|
|
169
|
+
background-color: #828795;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.switch input:checked:not(:disabled):hover + .slider {
|
|
173
|
+
background-color: #5f9402;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.switch input:active + .slider {
|
|
177
|
+
background-color: #5d6371;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.switch input:checked:active + .slider {
|
|
181
|
+
background-color: #476f02;
|
|
182
|
+
}
|
|
183
|
+
`;
|
|
184
|
+
i([
|
|
185
|
+
r({ type: String })
|
|
186
|
+
], e.prototype, "label", 2);
|
|
187
|
+
i([
|
|
188
|
+
r({ type: Boolean })
|
|
189
|
+
], e.prototype, "disabled", 2);
|
|
190
|
+
i([
|
|
191
|
+
r({ type: Boolean })
|
|
192
|
+
], e.prototype, "error", 2);
|
|
193
|
+
i([
|
|
194
|
+
r({ type: String })
|
|
195
|
+
], e.prototype, "size", 2);
|
|
196
|
+
i([
|
|
197
|
+
r({ type: Boolean })
|
|
198
|
+
], e.prototype, "checked", 2);
|
|
199
|
+
i([
|
|
200
|
+
r({ type: Boolean })
|
|
201
|
+
], e.prototype, "required", 2);
|
|
202
|
+
i([
|
|
203
|
+
r({ type: String })
|
|
204
|
+
], e.prototype, "tooltip", 2);
|
|
205
|
+
i([
|
|
206
|
+
r({ type: Function })
|
|
207
|
+
], e.prototype, "onChange", 2);
|
|
208
|
+
e = i([
|
|
209
|
+
c("lit-toggle")
|
|
210
|
+
], e);
|
|
211
|
+
export {
|
|
212
|
+
e as LitToggle
|
|
213
|
+
};
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import "../node_modules/@lit/reactive-element/reactive-element.js";
|
|
2
|
+
import { html as u, render as m } from "../node_modules/lit-html/lit-html.js";
|
|
3
|
+
import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
|
|
4
|
+
import { customElement as g } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
|
|
5
|
+
import { property as p } from "../node_modules/@lit/reactive-element/decorators/property.js";
|
|
6
|
+
import { directive as y, Directive as v } from "../node_modules/lit-html/directive.js";
|
|
7
|
+
import { autoUpdate as x, computePosition as w, offset as E, shift as b, flip as O, hide as C, size as L, arrow as k } from "../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
|
|
8
|
+
import { css as A } from "../node_modules/@lit/reactive-element/css-tag.js";
|
|
9
|
+
var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (t, e, o, i) => {
|
|
10
|
+
for (var s = i > 1 ? void 0 : i ? P(e, o) : e, a = t.length - 1, h; a >= 0; a--)
|
|
11
|
+
(h = t[a]) && (s = (i ? h(e, o, s) : h(s)) || s);
|
|
12
|
+
return i && s && S(e, o, s), s;
|
|
13
|
+
};
|
|
14
|
+
const l = ["click"], d = ["blur"];
|
|
15
|
+
let r = class extends f {
|
|
16
|
+
constructor() {
|
|
17
|
+
super(), this.showing = !1, this.manualOpening = !1, this.maxWidthAsTarget = !1, this.placement = "top", this.offset = 4, this.onClose = () => {
|
|
18
|
+
}, this.arrowElement = null, this._target = null, this.cleanupAutoUpdate = null, this.show = () => {
|
|
19
|
+
var t;
|
|
20
|
+
document.addEventListener("click", this.hideOnOutsideClick, { capture: !0 }), this.manualOpening || this.addEventListener("click", this.hideOnSlotClick), this.style.cssText = "", this.style.zIndex = "99999", this.style.width = `${this.maxWidthAsTarget ? `${(t = this.target) == null ? void 0 : t.clientWidth}px` || "0px" : void 0}`, this.style.maxWidth = `${this.maxWidthAsTarget ? void 0 : "max-content"}`, this.target && this.arrowElement && (this.cleanupAutoUpdate && (this.cleanupAutoUpdate(), this.cleanupAutoUpdate = null), this.cleanupAutoUpdate = x(this.target, this, () => {
|
|
21
|
+
w(this.target, this, {
|
|
22
|
+
placement: this.placement,
|
|
23
|
+
strategy: "absolute",
|
|
24
|
+
middleware: [
|
|
25
|
+
E(this.offset),
|
|
26
|
+
b(),
|
|
27
|
+
O(),
|
|
28
|
+
C(),
|
|
29
|
+
L({
|
|
30
|
+
padding: 20,
|
|
31
|
+
apply({ availableWidth: e, availableHeight: o, elements: i }) {
|
|
32
|
+
i.floating.style.maxWidth = `${Math.max(0, e)}px`;
|
|
33
|
+
const s = Math.min(
|
|
34
|
+
400,
|
|
35
|
+
Math.max(0, o)
|
|
36
|
+
);
|
|
37
|
+
i.floating.scrollHeight <= s ? i.floating.style.maxHeight = "" : i.floating.style.maxHeight = `${s}px`;
|
|
38
|
+
}
|
|
39
|
+
}),
|
|
40
|
+
k({ element: this.arrowElement })
|
|
41
|
+
]
|
|
42
|
+
}).then(
|
|
43
|
+
({
|
|
44
|
+
x: e,
|
|
45
|
+
y: o,
|
|
46
|
+
middlewareData: i,
|
|
47
|
+
placement: s
|
|
48
|
+
}) => {
|
|
49
|
+
i.hide && Object.assign(this.style, {
|
|
50
|
+
display: i.hide.referenceHidden || !this.showing ? "none" : "block"
|
|
51
|
+
}), this.style.left = `${e}px`, this.style.top = `${o}px`;
|
|
52
|
+
const { x: a, y: h } = i.arrow, c = {
|
|
53
|
+
top: "bottom",
|
|
54
|
+
right: "left",
|
|
55
|
+
bottom: "top",
|
|
56
|
+
left: "right"
|
|
57
|
+
}[s.split("-")[0]] || "top";
|
|
58
|
+
this.arrowElement && Object.assign(this.arrowElement.style, {
|
|
59
|
+
left: a != null ? `${a}px` : "",
|
|
60
|
+
top: h != null ? `${h}px` : "",
|
|
61
|
+
right: "",
|
|
62
|
+
bottom: "",
|
|
63
|
+
[c]: "-4px"
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
})), this.showing = !0, document.body.appendChild(this);
|
|
68
|
+
}, this.hide = () => {
|
|
69
|
+
var t;
|
|
70
|
+
this.showing = !1, this.cleanupAutoUpdate && (this.cleanupAutoUpdate(), this.cleanupAutoUpdate = null), document.removeEventListener("click", this.hideOnOutsideClick, { capture: !0 }), this.removeEventListener("click", this.hideOnSlotClick), (t = this.onClose) == null || t.call(this);
|
|
71
|
+
}, this.hideOnOutsideClick = (t) => {
|
|
72
|
+
const e = t.composedPath && t.composedPath() || [];
|
|
73
|
+
!e.includes(this) && !e.includes(this.target) && this.hide();
|
|
74
|
+
}, this.hideOnSlotClick = (t) => {
|
|
75
|
+
t.stopPropagation(), this.hide();
|
|
76
|
+
}, this.finishHide = () => {
|
|
77
|
+
this.showing || (this.style.display = "none");
|
|
78
|
+
}, this.addEventListener("transitionend", this.finishHide);
|
|
79
|
+
}
|
|
80
|
+
// Lazy creation
|
|
81
|
+
static lazy(t, e) {
|
|
82
|
+
const o = () => {
|
|
83
|
+
const i = document.createElement("simple-popper");
|
|
84
|
+
e(i), t.parentNode.insertBefore(i, t.nextSibling), i.show(), l.forEach((s) => t.removeEventListener(s, o));
|
|
85
|
+
};
|
|
86
|
+
l.forEach((i) => t.addEventListener(i, o));
|
|
87
|
+
}
|
|
88
|
+
firstUpdated() {
|
|
89
|
+
var t;
|
|
90
|
+
this.arrowElement = (t = this.shadowRoot) == null ? void 0 : t.querySelector("#arrow");
|
|
91
|
+
}
|
|
92
|
+
updated(t) {
|
|
93
|
+
t.has("showing") && this.manualOpening && this.showing && this.show();
|
|
94
|
+
}
|
|
95
|
+
connectedCallback() {
|
|
96
|
+
super.connectedCallback(), this.target ?? (this.target = this.previousElementSibling), this.finishHide();
|
|
97
|
+
}
|
|
98
|
+
get target() {
|
|
99
|
+
return this._target;
|
|
100
|
+
}
|
|
101
|
+
set target(t) {
|
|
102
|
+
this.target && !this.manualOpening && (l.forEach((e) => this.target.removeEventListener(e, this.show)), d.forEach((e) => this.target.removeEventListener(e, this.hide))), t && !this.manualOpening && (l.forEach((e) => t.addEventListener(e, this.show)), d.forEach((e) => t.addEventListener(e, this.hide))), this._target = t;
|
|
103
|
+
}
|
|
104
|
+
render() {
|
|
105
|
+
return u`<div id="arrow"></div>
|
|
106
|
+
<slot></slot>`;
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
r.styles = A`
|
|
110
|
+
:host {
|
|
111
|
+
position: absolute;
|
|
112
|
+
max-height: 50vh;
|
|
113
|
+
top: 0;
|
|
114
|
+
left: 0;
|
|
115
|
+
background-color: var(--background-paper, #fff);
|
|
116
|
+
border-radius: 0.5rem;
|
|
117
|
+
padding: 0.375rem;
|
|
118
|
+
box-shadow: var(--box-shadow, 0px 4px 6px rgba(0, 0, 0, 0.1));
|
|
119
|
+
/* Animate in */
|
|
120
|
+
opacity: 0;
|
|
121
|
+
transform: scale(0.75);
|
|
122
|
+
transition: opacity, transform;
|
|
123
|
+
transition-duration: 0.33s;
|
|
124
|
+
color: var(--text-primary, #111827);
|
|
125
|
+
overflow-y: auto;
|
|
126
|
+
overflow-x: hidden;
|
|
127
|
+
border: 0.0625rem solid var(--color-divider, #e5e7eb);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
:host([showing]) {
|
|
131
|
+
pointer-events: auto;
|
|
132
|
+
opacity: 1;
|
|
133
|
+
transform: scale(1);
|
|
134
|
+
}
|
|
135
|
+
#arrow {
|
|
136
|
+
position: absolute;
|
|
137
|
+
background: var(--background-paper, #fff);
|
|
138
|
+
width: 0.5rem;
|
|
139
|
+
height: 0.5rem;
|
|
140
|
+
transform: rotate(45deg);
|
|
141
|
+
}
|
|
142
|
+
`;
|
|
143
|
+
n([
|
|
144
|
+
p({ reflect: !0, type: Boolean })
|
|
145
|
+
], r.prototype, "showing", 2);
|
|
146
|
+
n([
|
|
147
|
+
p({ reflect: !0, type: Boolean })
|
|
148
|
+
], r.prototype, "manualOpening", 2);
|
|
149
|
+
n([
|
|
150
|
+
p({ reflect: !0, type: Boolean })
|
|
151
|
+
], r.prototype, "maxWidthAsTarget", 2);
|
|
152
|
+
n([
|
|
153
|
+
p({ reflect: !0, type: String })
|
|
154
|
+
], r.prototype, "placement", 2);
|
|
155
|
+
n([
|
|
156
|
+
p({ type: Number })
|
|
157
|
+
], r.prototype, "offset", 2);
|
|
158
|
+
n([
|
|
159
|
+
p({ type: Function })
|
|
160
|
+
], r.prototype, "onClose", 2);
|
|
161
|
+
r = n([
|
|
162
|
+
g("simple-popper")
|
|
163
|
+
], r);
|
|
164
|
+
class $ extends v {
|
|
165
|
+
constructor() {
|
|
166
|
+
super(...arguments), this.didSetupLazy = !1;
|
|
167
|
+
}
|
|
168
|
+
render(e = "") {
|
|
169
|
+
}
|
|
170
|
+
update(e, [o]) {
|
|
171
|
+
this.popperContent = o, this.part = e, this.didSetupLazy || this.setupLazy(), this.popper && this.renderTooltipContent();
|
|
172
|
+
}
|
|
173
|
+
setupLazy() {
|
|
174
|
+
this.didSetupLazy = !0, r.lazy(this.part.element, (e) => {
|
|
175
|
+
this.popper = e, this.renderTooltipContent();
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
renderTooltipContent() {
|
|
179
|
+
m(this.popperContent, this.popper, this.part.options);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
const M = y($);
|
|
183
|
+
export {
|
|
184
|
+
r as SimplePopper,
|
|
185
|
+
M as popper
|
|
186
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../node_modules/@lit/reactive-element/reactive-element.js";
|
|
2
|
-
import {
|
|
2
|
+
import { html as d, render as p } from "../node_modules/lit-html/lit-html.js";
|
|
3
3
|
import { LitElement as f } from "../node_modules/lit-element/lit-element.js";
|
|
4
4
|
import { customElement as u } from "../node_modules/@lit/reactive-element/decorators/custom-element.js";
|
|
5
5
|
import { property as h } from "../node_modules/@lit/reactive-element/decorators/property.js";
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);box-sizing:border-box;cursor:pointer;display:flex;position:relative;align-items:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover,.air-datepicker-cell.-in-range-.-focus-{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)}.air-datepicker-body{transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7,var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:flex;align-items:center;justify-content:center;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7,var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3,1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--adp-year-cell-height)}.air-datepicker-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:flex;cursor:pointer;align-items:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none}.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:#fff0}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.air-datepicker-time{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:12px;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:flex;align-items:center;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:Century Gothic,CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:flex;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right,var(--adp-time-track-color),var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size)/2*-1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:#0000;background:#0000}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:#0000;background:#0000}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:#0000;background:#0000}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:#0000}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:#0000}.air-datepicker{--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--adp-font-size: 14px;--adp-width: 246px;--adp-z-index: 100;--adp-padding: 4px;--adp-grid-areas: "nav" "body" "timepicker" "buttons";--adp-transition-duration: .3s;--adp-transition-ease: ease-out;--adp-transition-offset: 8px;--adp-background-color: #fff;--adp-background-color-hover: #f0f0f0;--adp-background-color-active: #eaeaea;--adp-background-color-in-range: rgba(92, 196, 239, .1);--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);--adp-background-color-selected-other-month-focused: #8ad5f4;--adp-background-color-selected-other-month: #a2ddf6;--adp-color: #4a4a4a;--adp-color-secondary: #9c9c9c;--adp-accent-color: #4eb5e6;--adp-color-current-date: var(--adp-accent-color);--adp-color-other-month: #dedede;--adp-color-disabled: #aeaeae;--adp-color-disabled-in-range: #939393;--adp-color-other-month-hover: #c5c5c5;--adp-border-color: #dbdbdb;--adp-border-color-inner: #efefef;--adp-border-radius: 4px;--adp-border-color-inline: #d7d7d7;--adp-nav-height: 32px;--adp-nav-arrow-color: var(--adp-color-secondary);--adp-nav-action-size: 32px;--adp-nav-color-secondary: var(--adp-color-secondary);--adp-day-name-color: #ff9a19;--adp-day-name-color-hover: #8ad5f4;--adp-day-cell-width: 1fr;--adp-day-cell-height: 32px;--adp-month-cell-height: 42px;--adp-year-cell-height: 56px;--adp-pointer-size: 10px;--adp-poiner-border-radius: 2px;--adp-pointer-offset: 14px;--adp-cell-border-radius: 4px;--adp-cell-background-color-hover: var(--adp-background-color-hover);--adp-cell-background-color-selected: #5cc4ef;--adp-cell-background-color-selected-hover: #45bced;--adp-cell-background-color-in-range: rgba(92, 196, 239, .1);--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, .2);--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);--adp-btn-height: 32px;--adp-btn-color: var(--adp-accent-color);--adp-btn-color-hover: var(--adp-color);--adp-btn-border-radius: var(--adp-border-radius);--adp-btn-background-color-hover: var(--adp-background-color-hover);--adp-btn-background-color-active: var(--adp-background-color-active);--adp-time-track-height: 1px;--adp-time-track-color: #dedede;--adp-time-track-color-hover: #b1b1b1;--adp-time-thumb-size: 12px;--adp-time-padding-inner: 10px;--adp-time-day-period-color: var(--adp-color-secondary);--adp-mobile-font-size: 16px;--adp-mobile-nav-height: 40px;--adp-mobile-width: 320px;--adp-mobile-day-cell-height: 38px;--adp-mobile-month-cell-height: 48px;--adp-mobile-year-cell-height: 64px}.air-datepicker-overlay{--adp-overlay-background-color: rgba(0, 0, 0, .3);--adp-overlay-transition-duration: .3s;--adp-overlay-transition-ease: ease-out;--adp-overlay-z-index: 99}.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);box-shadow:0 4px 12px #00000026;border-radius:var(--adp-border-radius);box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4,max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family),sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;transition:opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{transform:translate(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{transform:translate(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){transform:translate(0);opacity:1}.air-datepicker.-active-.-custom-position-{transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size: var(--adp-mobile-font-size);--adp-day-cell-height: var(--adp-mobile-day-cell-height);--adp-month-cell-height: var(--adp-mobile-month-cell-height);--adp-year-cell-height: var(--adp-mobile-year-cell-height);--adp-nav-height: var(--adp-mobile-nav-height);--adp-nav-action-size: var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){transform:translate(-50%,calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){transform:translate(-50%,-50%)}.air-datepicker.-custom-position-{transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size: calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size)/2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size)/2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;transition-delay:0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s}
|