@francofantomius/material-components 1.0.1 → 1.1.0
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/CHANGELOG.md +39 -0
- package/README.md +41 -9
- package/custom-elements.json +19060 -9017
- package/dist/chunks/account-menu-Dau0UHTl.js +1290 -0
- package/dist/chunks/account-menu-Dau0UHTl.js.map +1 -0
- package/dist/chunks/app-drawer-Du1ePzxZ.js +903 -0
- package/dist/chunks/app-drawer-Du1ePzxZ.js.map +1 -0
- package/dist/chunks/bottom-sheet-q79BBYAj.js +402 -0
- package/dist/chunks/bottom-sheet-q79BBYAj.js.map +1 -0
- package/dist/chunks/{button-B4TSZ7Sl.js → button-D2vn7kJ8.js} +9 -8
- package/dist/chunks/button-D2vn7kJ8.js.map +1 -0
- package/dist/chunks/button-group-CNqvJx1n.js +143 -0
- package/dist/chunks/button-group-CNqvJx1n.js.map +1 -0
- package/dist/chunks/carousel-item-BG6kjjjk.js +371 -0
- package/dist/chunks/carousel-item-BG6kjjjk.js.map +1 -0
- package/dist/chunks/date-picker-DJeHi4w-.js +777 -0
- package/dist/chunks/date-picker-DJeHi4w-.js.map +1 -0
- package/dist/chunks/fab-menu.css-3pu930sZ.js +320 -0
- package/dist/chunks/fab-menu.css-3pu930sZ.js.map +1 -0
- package/dist/chunks/{icon-button-BdSc7eot.js → icon-button-BQz73GLa.js} +2 -2
- package/dist/chunks/icon-button-BQz73GLa.js.map +1 -0
- package/dist/chunks/loading-indicator-CvWnZr9o.js +193 -0
- package/dist/chunks/loading-indicator-CvWnZr9o.js.map +1 -0
- package/dist/chunks/menu-item-BBSp5Cqc.js +390 -0
- package/dist/chunks/menu-item-BBSp5Cqc.js.map +1 -0
- package/dist/chunks/navigation-bar-item-C9DfOEzg.js +397 -0
- package/dist/chunks/navigation-bar-item-C9DfOEzg.js.map +1 -0
- package/dist/chunks/navigation-rail-item-6pdhNHJK.js +357 -0
- package/dist/chunks/navigation-rail-item-6pdhNHJK.js.map +1 -0
- package/dist/chunks/segmented-button-B0BvGSQ7.js +265 -0
- package/dist/chunks/segmented-button-B0BvGSQ7.js.map +1 -0
- package/dist/chunks/side-sheet-S2w081AK.js +360 -0
- package/dist/chunks/side-sheet-S2w081AK.js.map +1 -0
- package/dist/chunks/slider-D-mnO8yQ.js +450 -0
- package/dist/chunks/slider-D-mnO8yQ.js.map +1 -0
- package/dist/chunks/split-button-DUfjukQY.js +450 -0
- package/dist/chunks/split-button-DUfjukQY.js.map +1 -0
- package/dist/chunks/{table-aRTYzDyE.js → table-CqHnneAj.js} +2 -2
- package/dist/chunks/{table-aRTYzDyE.js.map → table-CqHnneAj.js.map} +1 -1
- package/dist/chunks/time-picker-CZnb2sWz.js +785 -0
- package/dist/chunks/time-picker-CZnb2sWz.js.map +1 -0
- package/dist/chunks/toolbar-DXVQbQKJ.js +271 -0
- package/dist/chunks/toolbar-DXVQbQKJ.js.map +1 -0
- package/dist/chunks/tooltip-CE7JMHMu.js +398 -0
- package/dist/chunks/tooltip-CE7JMHMu.js.map +1 -0
- package/dist/components/account-menu/account-menu.js +8 -0
- package/dist/components/app-drawer/app-drawer.js +9 -0
- package/dist/components/bottom-sheet/bottom-sheet.css.d.ts +2 -0
- package/dist/components/bottom-sheet/bottom-sheet.css.d.ts.map +1 -0
- package/dist/components/bottom-sheet/bottom-sheet.d.ts +69 -0
- package/dist/components/bottom-sheet/bottom-sheet.d.ts.map +1 -0
- package/dist/components/bottom-sheet/bottom-sheet.js +4 -0
- package/dist/components/button/button.css.d.ts.map +1 -1
- package/dist/components/button/button.js +1 -1
- package/dist/components/button-group/button-group.css.d.ts +2 -0
- package/dist/components/button-group/button-group.css.d.ts.map +1 -0
- package/dist/components/button-group/button-group.d.ts +28 -0
- package/dist/components/button-group/button-group.d.ts.map +1 -0
- package/dist/components/button-group/button-group.js +4 -0
- package/dist/components/carousel/carousel-item.d.ts +33 -0
- package/dist/components/carousel/carousel-item.d.ts.map +1 -0
- package/dist/components/carousel/carousel-item.js +4 -0
- package/dist/components/carousel/carousel.css.d.ts +3 -0
- package/dist/components/carousel/carousel.css.d.ts.map +1 -0
- package/dist/components/carousel/carousel.d.ts +81 -0
- package/dist/components/carousel/carousel.d.ts.map +1 -0
- package/dist/components/carousel/carousel.js +284 -0
- package/dist/components/carousel/carousel.js.map +1 -0
- package/dist/components/date-picker/date-picker.css.d.ts +2 -0
- package/dist/components/date-picker/date-picker.css.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.d.ts +59 -0
- package/dist/components/date-picker/date-picker.d.ts.map +1 -0
- package/dist/components/date-picker/date-picker.js +4 -0
- package/dist/components/fab-menu/fab-menu-item.d.ts +35 -0
- package/dist/components/fab-menu/fab-menu-item.d.ts.map +1 -0
- package/dist/components/fab-menu/fab-menu-item.js +93 -0
- package/dist/components/fab-menu/fab-menu-item.js.map +1 -0
- package/dist/components/fab-menu/fab-menu.css.d.ts +3 -0
- package/dist/components/fab-menu/fab-menu.css.d.ts.map +1 -0
- package/dist/components/fab-menu/fab-menu.d.ts +72 -0
- package/dist/components/fab-menu/fab-menu.d.ts.map +1 -0
- package/dist/components/fab-menu/fab-menu.js +148 -0
- package/dist/components/fab-menu/fab-menu.js.map +1 -0
- package/dist/components/icon-button/icon-button.js +1 -1
- package/dist/components/loading-indicator/loading-indicator.css.d.ts +2 -0
- package/dist/components/loading-indicator/loading-indicator.css.d.ts.map +1 -0
- package/dist/components/loading-indicator/loading-indicator.d.ts +48 -0
- package/dist/components/loading-indicator/loading-indicator.d.ts.map +1 -0
- package/dist/components/loading-indicator/loading-indicator.js +4 -0
- package/dist/components/menu/menu-item.d.ts +41 -0
- package/dist/components/menu/menu-item.d.ts.map +1 -0
- package/dist/components/menu/menu-item.js +4 -0
- package/dist/components/menu/menu.css.d.ts +3 -0
- package/dist/components/menu/menu.css.d.ts.map +1 -0
- package/dist/components/menu/menu.d.ts +91 -0
- package/dist/components/menu/menu.d.ts.map +1 -0
- package/dist/components/menu/menu.js +205 -0
- package/dist/components/menu/menu.js.map +1 -0
- package/dist/components/navigation-bar/navigation-bar-item.d.ts +49 -0
- package/dist/components/navigation-bar/navigation-bar-item.d.ts.map +1 -0
- package/dist/components/navigation-bar/navigation-bar-item.js +5 -0
- package/dist/components/navigation-bar/navigation-bar.css.d.ts +3 -0
- package/dist/components/navigation-bar/navigation-bar.css.d.ts.map +1 -0
- package/dist/components/navigation-bar/navigation-bar.d.ts +50 -0
- package/dist/components/navigation-bar/navigation-bar.d.ts.map +1 -0
- package/dist/components/navigation-bar/navigation-bar.js +150 -0
- package/dist/components/navigation-bar/navigation-bar.js.map +1 -0
- package/dist/components/navigation-rail/navigation-rail-item.d.ts +36 -0
- package/dist/components/navigation-rail/navigation-rail-item.d.ts.map +1 -0
- package/dist/components/navigation-rail/navigation-rail-item.js +5 -0
- package/dist/components/navigation-rail/navigation-rail.css.d.ts +3 -0
- package/dist/components/navigation-rail/navigation-rail.css.d.ts.map +1 -0
- package/dist/components/navigation-rail/navigation-rail.d.ts +43 -0
- package/dist/components/navigation-rail/navigation-rail.d.ts.map +1 -0
- package/dist/components/navigation-rail/navigation-rail.js +121 -0
- package/dist/components/navigation-rail/navigation-rail.js.map +1 -0
- package/dist/components/segmented-button/segmented-button.css.d.ts +3 -0
- package/dist/components/segmented-button/segmented-button.css.d.ts.map +1 -0
- package/dist/components/segmented-button/segmented-button.d.ts +40 -0
- package/dist/components/segmented-button/segmented-button.d.ts.map +1 -0
- package/dist/components/segmented-button/segmented-button.js +5 -0
- package/dist/components/side-sheet/side-sheet.css.d.ts +2 -0
- package/dist/components/side-sheet/side-sheet.css.d.ts.map +1 -0
- package/dist/components/side-sheet/side-sheet.d.ts +57 -0
- package/dist/components/side-sheet/side-sheet.d.ts.map +1 -0
- package/dist/components/side-sheet/side-sheet.js +4 -0
- package/dist/components/slider/slider.css.d.ts +2 -0
- package/dist/components/slider/slider.css.d.ts.map +1 -0
- package/dist/components/slider/slider.d.ts +51 -0
- package/dist/components/slider/slider.d.ts.map +1 -0
- package/dist/components/slider/slider.js +4 -0
- package/dist/components/split-button/split-button.css.d.ts +2 -0
- package/dist/components/split-button/split-button.css.d.ts.map +1 -0
- package/dist/components/split-button/split-button.d.ts +89 -0
- package/dist/components/split-button/split-button.d.ts.map +1 -0
- package/dist/components/split-button/split-button.js +4 -0
- package/dist/components/table/table.js +1 -1
- package/dist/components/time-picker/time-picker.css.d.ts +2 -0
- package/dist/components/time-picker/time-picker.css.d.ts.map +1 -0
- package/dist/components/time-picker/time-picker.d.ts +87 -0
- package/dist/components/time-picker/time-picker.d.ts.map +1 -0
- package/dist/components/time-picker/time-picker.js +4 -0
- package/dist/components/toolbar/toolbar.css.d.ts +2 -0
- package/dist/components/toolbar/toolbar.css.d.ts.map +1 -0
- package/dist/components/toolbar/toolbar.d.ts +53 -0
- package/dist/components/toolbar/toolbar.d.ts.map +1 -0
- package/dist/components/toolbar/toolbar.js +4 -0
- package/dist/components/tooltip/tooltip.css.d.ts +2 -0
- package/dist/components/tooltip/tooltip.css.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.d.ts +89 -0
- package/dist/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.js +4 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +148 -2263
- package/dist/tokens/index.js +4 -2
- package/dist/tokens/index.js.map +1 -1
- package/dist/tokens/theme.css.d.ts.map +1 -1
- package/llms.txt +2326 -0
- package/package.json +99 -2
- package/dist/chunks/button-B4TSZ7Sl.js.map +0 -1
- package/dist/chunks/icon-button-BdSc7eot.js.map +0 -1
- package/dist/index.js.map +0 -1
|
@@ -0,0 +1,398 @@
|
|
|
1
|
+
import { n as u, t as o } from "./decorate-DXuynaiA.js";
|
|
2
|
+
import { css as b, html as l, nothing as m } from "lit";
|
|
3
|
+
import { customElement as y, property as s, query as x } from "lit/decorators.js";
|
|
4
|
+
var g = b`
|
|
5
|
+
:host {
|
|
6
|
+
display: inline-block;
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.tooltip {
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
position: fixed;
|
|
13
|
+
z-index: 1000;
|
|
14
|
+
pointer-events: none;
|
|
15
|
+
opacity: 0;
|
|
16
|
+
visibility: hidden;
|
|
17
|
+
transform: scale(0.92);
|
|
18
|
+
transition:
|
|
19
|
+
opacity 150ms cubic-bezier(0, 0, 0.2, 1),
|
|
20
|
+
transform 150ms cubic-bezier(0, 0, 0.2, 1),
|
|
21
|
+
visibility 150ms linear;
|
|
22
|
+
word-wrap: break-word;
|
|
23
|
+
font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:host([open]) .tooltip {
|
|
27
|
+
opacity: 1;
|
|
28
|
+
visibility: visible;
|
|
29
|
+
transform: scale(1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Plain Tooltip */
|
|
33
|
+
:host(:not([rich])) .tooltip {
|
|
34
|
+
background-color: var(--md-sys-color-inverse-surface, #313033);
|
|
35
|
+
color: var(--md-sys-color-inverse-on-surface, #F4EFF4);
|
|
36
|
+
border-radius: var(--md-sys-shape-corner-extra-small, 4px);
|
|
37
|
+
padding: 4px 8px;
|
|
38
|
+
font-size: 12px;
|
|
39
|
+
font-weight: 400;
|
|
40
|
+
line-height: 16px;
|
|
41
|
+
letter-spacing: 0.4px;
|
|
42
|
+
min-height: 24px;
|
|
43
|
+
max-width: 240px;
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
box-shadow: var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, 0.2));
|
|
48
|
+
user-select: none;
|
|
49
|
+
text-align: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Rich Tooltip */
|
|
53
|
+
:host([rich]) .tooltip {
|
|
54
|
+
background-color: var(--md-sys-color-surface-container, #EDE7EE);
|
|
55
|
+
color: var(--md-sys-color-on-surface-variant, #49454E);
|
|
56
|
+
border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);
|
|
57
|
+
border-radius: var(--md-sys-shape-corner-medium, 12px);
|
|
58
|
+
padding: 12px 16px;
|
|
59
|
+
min-width: 180px;
|
|
60
|
+
max-width: 320px;
|
|
61
|
+
box-shadow: var(--md-sys-elevation-level2, 0 2px 6px 2px rgba(0, 0, 0, 0.15));
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: 6px;
|
|
65
|
+
text-align: left;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
:host([rich][open]) .tooltip {
|
|
69
|
+
pointer-events: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.subhead,
|
|
73
|
+
.headline {
|
|
74
|
+
color: var(--md-sys-color-on-surface, #1D1B20);
|
|
75
|
+
font-size: 14px;
|
|
76
|
+
font-weight: 500;
|
|
77
|
+
line-height: 20px;
|
|
78
|
+
margin: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.supporting-text {
|
|
82
|
+
color: var(--md-sys-color-on-surface-variant, #49454E);
|
|
83
|
+
font-size: 14px;
|
|
84
|
+
font-weight: 400;
|
|
85
|
+
line-height: 20px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.content {
|
|
89
|
+
color: inherit;
|
|
90
|
+
font-size: inherit;
|
|
91
|
+
font-weight: inherit;
|
|
92
|
+
line-height: inherit;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.actions {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: flex-end;
|
|
99
|
+
gap: 8px;
|
|
100
|
+
margin-top: 6px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.action-button {
|
|
104
|
+
background: transparent;
|
|
105
|
+
border: none;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
font-family: inherit;
|
|
108
|
+
font-size: 14px;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
color: var(--md-sys-color-primary, #6750A4);
|
|
111
|
+
padding: 4px 8px;
|
|
112
|
+
border-radius: var(--md-sys-shape-corner-extra-small, 4px);
|
|
113
|
+
transition: background-color 150ms ease;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.action-button:hover {
|
|
117
|
+
background-color: rgba(103, 80, 164, 0.08);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.action-button:focus-visible {
|
|
121
|
+
outline: 2px solid var(--md-sys-color-primary, #6750A4);
|
|
122
|
+
outline-offset: 1px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Caret Arrow */
|
|
126
|
+
.caret {
|
|
127
|
+
display: none;
|
|
128
|
+
position: absolute;
|
|
129
|
+
width: 0;
|
|
130
|
+
height: 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host([has-caret]) .caret {
|
|
134
|
+
display: block;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:host([position='top'][has-caret]) .caret {
|
|
138
|
+
bottom: -6px;
|
|
139
|
+
left: 50%;
|
|
140
|
+
transform: translateX(-50%);
|
|
141
|
+
border-left: 6px solid transparent;
|
|
142
|
+
border-right: 6px solid transparent;
|
|
143
|
+
border-top: 6px solid var(--md-sys-color-inverse-surface, #313033);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
:host([rich][position='top'][has-caret]) .caret {
|
|
147
|
+
border-top-color: var(--md-sys-color-surface-container, #EDE7EE);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
:host([position='bottom'][has-caret]) .caret {
|
|
151
|
+
top: -6px;
|
|
152
|
+
left: 50%;
|
|
153
|
+
transform: translateX(-50%);
|
|
154
|
+
border-left: 6px solid transparent;
|
|
155
|
+
border-right: 6px solid transparent;
|
|
156
|
+
border-bottom: 6px solid var(--md-sys-color-inverse-surface, #313033);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
:host([rich][position='bottom'][has-caret]) .caret {
|
|
160
|
+
border-bottom-color: var(--md-sys-color-surface-container, #EDE7EE);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
:host([position='left'][has-caret]) .caret {
|
|
164
|
+
right: -6px;
|
|
165
|
+
top: 50%;
|
|
166
|
+
transform: translateY(-50%);
|
|
167
|
+
border-top: 6px solid transparent;
|
|
168
|
+
border-bottom: 6px solid transparent;
|
|
169
|
+
border-left: 6px solid var(--md-sys-color-inverse-surface, #313033);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
:host([rich][position='left'][has-caret]) .caret {
|
|
173
|
+
border-left-color: var(--md-sys-color-surface-container, #EDE7EE);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
:host([position='right'][has-caret]) .caret {
|
|
177
|
+
left: -6px;
|
|
178
|
+
top: 50%;
|
|
179
|
+
transform: translateY(-50%);
|
|
180
|
+
border-top: 6px solid transparent;
|
|
181
|
+
border-bottom: 6px solid transparent;
|
|
182
|
+
border-right: 6px solid var(--md-sys-color-inverse-surface, #313033);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
:host([rich][position='right'][has-caret]) .caret {
|
|
186
|
+
border-right-color: var(--md-sys-color-surface-container, #EDE7EE);
|
|
187
|
+
}
|
|
188
|
+
`, i = class extends u {
|
|
189
|
+
constructor(...t) {
|
|
190
|
+
super(...t), this.open = !1, this.position = "bottom", this.rich = !1, this.for = "", this.value = "", this.text = "", this.headline = "", this.actionText = "", this.showDelay = 500, this.hideDelay = 150, this.persistent = !1, this.hasCaret = !1, this.disabled = !1, this._anchorElement = null, this._boundAnchor = null, this._showTimer = null, this._hideTimer = null, this.handleAnchorMouseEnter = () => {
|
|
191
|
+
this.disabled || (this.clearTimers(), this.showDelay > 0 ? this._showTimer = setTimeout(() => {
|
|
192
|
+
this.show();
|
|
193
|
+
}, this.showDelay) : this.show());
|
|
194
|
+
}, this.handleAnchorMouseLeave = () => {
|
|
195
|
+
this.disabled || this.persistent || (this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this.hideDelay > 0 ? this._hideTimer = setTimeout(() => {
|
|
196
|
+
this.hide();
|
|
197
|
+
}, this.hideDelay) : this.hide());
|
|
198
|
+
}, this.handleAnchorFocus = () => {
|
|
199
|
+
this.disabled || (this.clearTimers(), this.show());
|
|
200
|
+
}, this.handleAnchorBlur = () => {
|
|
201
|
+
this.disabled || this.persistent || (this.clearTimers(), this.hide());
|
|
202
|
+
}, this.handleTooltipMouseEnter = () => {
|
|
203
|
+
this.rich && this.open && this._hideTimer !== null && (clearTimeout(this._hideTimer), this._hideTimer = null);
|
|
204
|
+
}, this.handleTooltipMouseLeave = () => {
|
|
205
|
+
this.rich && this.open && !this.persistent && this.handleAnchorMouseLeave();
|
|
206
|
+
}, this.handleKeyDown = (e) => {
|
|
207
|
+
e.key === "Escape" && this.open && this.hide();
|
|
208
|
+
}, this.handleWindowChange = () => {
|
|
209
|
+
this.open && this.updatePosition();
|
|
210
|
+
}, this.handleDocumentClick = (e) => {
|
|
211
|
+
if (!this.open || !this.rich) return;
|
|
212
|
+
const n = e.composedPath(), r = this.resolveAnchorElement();
|
|
213
|
+
!n.includes(this) && (!r || !n.includes(r)) && this.hide();
|
|
214
|
+
}, this.handleActionClick = () => {
|
|
215
|
+
this.emitEvent("action", { target: this }), this.persistent || this.hide();
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
static {
|
|
219
|
+
this.styles = [u.styles, g];
|
|
220
|
+
}
|
|
221
|
+
get delay() {
|
|
222
|
+
return this.showDelay;
|
|
223
|
+
}
|
|
224
|
+
set delay(t) {
|
|
225
|
+
this.showDelay = t;
|
|
226
|
+
}
|
|
227
|
+
get anchor() {
|
|
228
|
+
return this._anchorElement || this.resolveAnchorElement();
|
|
229
|
+
}
|
|
230
|
+
set anchor(t) {
|
|
231
|
+
this._anchorElement = t, this.bindAnchorEvents();
|
|
232
|
+
}
|
|
233
|
+
get target() {
|
|
234
|
+
return this.anchor;
|
|
235
|
+
}
|
|
236
|
+
set target(t) {
|
|
237
|
+
this.anchor = t;
|
|
238
|
+
}
|
|
239
|
+
connectedCallback() {
|
|
240
|
+
super.connectedCallback(), window.addEventListener("keydown", this.handleKeyDown), window.addEventListener("resize", this.handleWindowChange), window.addEventListener("scroll", this.handleWindowChange, !0), document.addEventListener("pointerdown", this.handleDocumentClick), this.bindAnchorEvents();
|
|
241
|
+
}
|
|
242
|
+
disconnectedCallback() {
|
|
243
|
+
super.disconnectedCallback(), window.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", this.handleWindowChange), window.removeEventListener("scroll", this.handleWindowChange, !0), document.removeEventListener("pointerdown", this.handleDocumentClick), this.unbindAnchorEvents(), this.clearTimers();
|
|
244
|
+
}
|
|
245
|
+
firstUpdated() {
|
|
246
|
+
this.bindAnchorEvents();
|
|
247
|
+
}
|
|
248
|
+
updated(t) {
|
|
249
|
+
super.updated(t), t.has("for") && this.bindAnchorEvents(), t.has("open") && (this.open ? (this.updatePosition(), this.emitEvent("open", { target: this })) : this.emitEvent("close", { target: this })), t.has("position") && this.open && this.updatePosition();
|
|
250
|
+
}
|
|
251
|
+
resolveAnchorElement() {
|
|
252
|
+
if (this._anchorElement) return this._anchorElement;
|
|
253
|
+
if (this.for) {
|
|
254
|
+
const e = this.getRootNode(), n = e?.getElementById ? e.getElementById(this.for) : document.getElementById(this.for);
|
|
255
|
+
if (n) return n;
|
|
256
|
+
}
|
|
257
|
+
const t = this.querySelector('[slot="anchor"]');
|
|
258
|
+
return t || (this.previousElementSibling instanceof HTMLElement ? this.previousElementSibling : this.parentElement && this.parentElement !== document.body && this.parentElement !== document.documentElement ? this.parentElement : null);
|
|
259
|
+
}
|
|
260
|
+
bindAnchorEvents() {
|
|
261
|
+
const t = this.resolveAnchorElement();
|
|
262
|
+
t !== this._boundAnchor && (this.unbindAnchorEvents(), this._boundAnchor = t, this._boundAnchor && (this._boundAnchor.addEventListener("mouseenter", this.handleAnchorMouseEnter), this._boundAnchor.addEventListener("mouseleave", this.handleAnchorMouseLeave), this._boundAnchor.addEventListener("focusin", this.handleAnchorFocus), this._boundAnchor.addEventListener("focusout", this.handleAnchorBlur)));
|
|
263
|
+
}
|
|
264
|
+
unbindAnchorEvents() {
|
|
265
|
+
this._boundAnchor && (this._boundAnchor.removeEventListener("mouseenter", this.handleAnchorMouseEnter), this._boundAnchor.removeEventListener("mouseleave", this.handleAnchorMouseLeave), this._boundAnchor.removeEventListener("focusin", this.handleAnchorFocus), this._boundAnchor.removeEventListener("focusout", this.handleAnchorBlur), this._boundAnchor = null);
|
|
266
|
+
}
|
|
267
|
+
clearTimers() {
|
|
268
|
+
this._showTimer !== null && (clearTimeout(this._showTimer), this._showTimer = null), this._hideTimer !== null && (clearTimeout(this._hideTimer), this._hideTimer = null);
|
|
269
|
+
}
|
|
270
|
+
show() {
|
|
271
|
+
this.disabled || this.open || (this.open = !0, this.updatePosition());
|
|
272
|
+
}
|
|
273
|
+
hide() {
|
|
274
|
+
this.open && (this.open = !1);
|
|
275
|
+
}
|
|
276
|
+
close() {
|
|
277
|
+
this.hide();
|
|
278
|
+
}
|
|
279
|
+
toggle() {
|
|
280
|
+
this.open ? this.hide() : this.show();
|
|
281
|
+
}
|
|
282
|
+
updatePosition() {
|
|
283
|
+
if (!this.tooltipPanel) return;
|
|
284
|
+
const t = this.resolveAnchorElement();
|
|
285
|
+
if (!t) return;
|
|
286
|
+
const e = t.getBoundingClientRect(), n = this.tooltipPanel.getBoundingClientRect(), r = n.width || (this.rich ? 220 : 80), d = n.height || (this.rich ? 80 : 24), c = this.rich ? 8 : 4;
|
|
287
|
+
let h = 0, a = 0;
|
|
288
|
+
switch (this.position) {
|
|
289
|
+
case "top":
|
|
290
|
+
h = e.top - d - c, a = e.left + (e.width - r) / 2;
|
|
291
|
+
break;
|
|
292
|
+
case "bottom":
|
|
293
|
+
h = e.bottom + c, a = e.left + (e.width - r) / 2;
|
|
294
|
+
break;
|
|
295
|
+
case "left":
|
|
296
|
+
h = e.top + (e.height - d) / 2, a = e.left - r - c;
|
|
297
|
+
break;
|
|
298
|
+
case "right":
|
|
299
|
+
h = e.top + (e.height - d) / 2, a = e.right + c;
|
|
300
|
+
}
|
|
301
|
+
const p = 8, f = typeof window < "u" ? window.innerWidth : 1024, v = typeof window < "u" ? window.innerHeight : 768;
|
|
302
|
+
a = Math.max(p, Math.min(a, f - r - p)), h = Math.max(p, Math.min(h, v - d - p)), this.tooltipPanel.style.top = `${h}px`, this.tooltipPanel.style.left = `${a}px`;
|
|
303
|
+
}
|
|
304
|
+
render() {
|
|
305
|
+
const t = this.value || this.text;
|
|
306
|
+
return l`
|
|
307
|
+
<slot name="anchor"></slot>
|
|
308
|
+
|
|
309
|
+
<div
|
|
310
|
+
class="tooltip"
|
|
311
|
+
role="tooltip"
|
|
312
|
+
aria-hidden=${this.open ? "false" : "true"}
|
|
313
|
+
@mouseenter=${this.handleTooltipMouseEnter}
|
|
314
|
+
@mouseleave=${this.handleTooltipMouseLeave}
|
|
315
|
+
>
|
|
316
|
+
<span class="caret" aria-hidden="true"></span>
|
|
317
|
+
|
|
318
|
+
${this.rich ? l`
|
|
319
|
+
${this.headline ? l`<h3 class="headline"><slot name="headline">${this.headline}</slot></h3>` : l`<slot name="headline"></slot>`}
|
|
320
|
+
<div class="supporting-text">
|
|
321
|
+
<slot>${t}</slot>
|
|
322
|
+
</div>
|
|
323
|
+
${this.actionText || this.querySelector('[slot="actions"]') ? l`
|
|
324
|
+
<div class="actions">
|
|
325
|
+
<slot name="actions">
|
|
326
|
+
${this.actionText ? l`
|
|
327
|
+
<button
|
|
328
|
+
type="button"
|
|
329
|
+
class="action-button"
|
|
330
|
+
@click=${this.handleActionClick}
|
|
331
|
+
>
|
|
332
|
+
${this.actionText}
|
|
333
|
+
</button>
|
|
334
|
+
` : m}
|
|
335
|
+
</slot>
|
|
336
|
+
</div>
|
|
337
|
+
` : m}
|
|
338
|
+
` : l`
|
|
339
|
+
<span class="content">
|
|
340
|
+
<slot>${t}</slot>
|
|
341
|
+
</span>
|
|
342
|
+
`}
|
|
343
|
+
</div>
|
|
344
|
+
`;
|
|
345
|
+
}
|
|
346
|
+
};
|
|
347
|
+
o([s({
|
|
348
|
+
type: Boolean,
|
|
349
|
+
reflect: !0
|
|
350
|
+
})], i.prototype, "open", void 0);
|
|
351
|
+
o([s({
|
|
352
|
+
type: String,
|
|
353
|
+
reflect: !0
|
|
354
|
+
})], i.prototype, "position", void 0);
|
|
355
|
+
o([s({
|
|
356
|
+
type: Boolean,
|
|
357
|
+
reflect: !0
|
|
358
|
+
})], i.prototype, "rich", void 0);
|
|
359
|
+
o([s({
|
|
360
|
+
type: String,
|
|
361
|
+
reflect: !0
|
|
362
|
+
})], i.prototype, "for", void 0);
|
|
363
|
+
o([s({ type: String })], i.prototype, "value", void 0);
|
|
364
|
+
o([s({ type: String })], i.prototype, "text", void 0);
|
|
365
|
+
o([s({ type: String })], i.prototype, "headline", void 0);
|
|
366
|
+
o([s({
|
|
367
|
+
type: String,
|
|
368
|
+
attribute: "action-text"
|
|
369
|
+
})], i.prototype, "actionText", void 0);
|
|
370
|
+
o([s({
|
|
371
|
+
type: Number,
|
|
372
|
+
attribute: "show-delay"
|
|
373
|
+
})], i.prototype, "showDelay", void 0);
|
|
374
|
+
o([s({
|
|
375
|
+
type: Number,
|
|
376
|
+
attribute: "hide-delay"
|
|
377
|
+
})], i.prototype, "hideDelay", void 0);
|
|
378
|
+
o([s({ type: Number })], i.prototype, "delay", null);
|
|
379
|
+
o([s({
|
|
380
|
+
type: Boolean,
|
|
381
|
+
reflect: !0
|
|
382
|
+
})], i.prototype, "persistent", void 0);
|
|
383
|
+
o([s({
|
|
384
|
+
type: Boolean,
|
|
385
|
+
reflect: !0,
|
|
386
|
+
attribute: "has-caret"
|
|
387
|
+
})], i.prototype, "hasCaret", void 0);
|
|
388
|
+
o([s({
|
|
389
|
+
type: Boolean,
|
|
390
|
+
reflect: !0
|
|
391
|
+
})], i.prototype, "disabled", void 0);
|
|
392
|
+
o([x(".tooltip")], i.prototype, "tooltipPanel", void 0);
|
|
393
|
+
i = o([y("md-tooltip")], i);
|
|
394
|
+
export {
|
|
395
|
+
i as t
|
|
396
|
+
};
|
|
397
|
+
|
|
398
|
+
//# sourceMappingURL=tooltip-CE7JMHMu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tooltip-CE7JMHMu.js","names":[],"sources":["../../src/components/tooltip/tooltip.css.ts","../../src/components/tooltip/tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tooltipStyles = css`\n :host {\n display: inline-block;\n position: relative;\n }\n\n .tooltip {\n box-sizing: border-box;\n position: fixed;\n z-index: 1000;\n pointer-events: none;\n opacity: 0;\n visibility: hidden;\n transform: scale(0.92);\n transition:\n opacity 150ms cubic-bezier(0, 0, 0.2, 1),\n transform 150ms cubic-bezier(0, 0, 0.2, 1),\n visibility 150ms linear;\n word-wrap: break-word;\n font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n :host([open]) .tooltip {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n }\n\n /* Plain Tooltip */\n :host(:not([rich])) .tooltip {\n background-color: var(--md-sys-color-inverse-surface, #313033);\n color: var(--md-sys-color-inverse-on-surface, #F4EFF4);\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0.4px;\n min-height: 24px;\n max-width: 240px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-shadow: var(--md-sys-elevation-level1, 0 1px 3px rgba(0, 0, 0, 0.2));\n user-select: none;\n text-align: center;\n }\n\n /* Rich Tooltip */\n :host([rich]) .tooltip {\n background-color: var(--md-sys-color-surface-container, #EDE7EE);\n color: var(--md-sys-color-on-surface-variant, #49454E);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 12px);\n padding: 12px 16px;\n min-width: 180px;\n max-width: 320px;\n box-shadow: var(--md-sys-elevation-level2, 0 2px 6px 2px rgba(0, 0, 0, 0.15));\n display: flex;\n flex-direction: column;\n gap: 6px;\n text-align: left;\n }\n\n :host([rich][open]) .tooltip {\n pointer-events: auto;\n }\n\n .subhead,\n .headline {\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-size: 14px;\n font-weight: 500;\n line-height: 20px;\n margin: 0;\n }\n\n .supporting-text {\n color: var(--md-sys-color-on-surface-variant, #49454E);\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n }\n\n .content {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: inherit;\n }\n\n .actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 6px;\n }\n\n .action-button {\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--md-sys-color-primary, #6750A4);\n padding: 4px 8px;\n border-radius: var(--md-sys-shape-corner-extra-small, 4px);\n transition: background-color 150ms ease;\n }\n\n .action-button:hover {\n background-color: rgba(103, 80, 164, 0.08);\n }\n\n .action-button:focus-visible {\n outline: 2px solid var(--md-sys-color-primary, #6750A4);\n outline-offset: 1px;\n }\n\n /* Caret Arrow */\n .caret {\n display: none;\n position: absolute;\n width: 0;\n height: 0;\n }\n\n :host([has-caret]) .caret {\n display: block;\n }\n\n :host([position='top'][has-caret]) .caret {\n bottom: -6px;\n left: 50%;\n transform: translateX(-50%);\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-top: 6px solid var(--md-sys-color-inverse-surface, #313033);\n }\n\n :host([rich][position='top'][has-caret]) .caret {\n border-top-color: var(--md-sys-color-surface-container, #EDE7EE);\n }\n\n :host([position='bottom'][has-caret]) .caret {\n top: -6px;\n left: 50%;\n transform: translateX(-50%);\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid var(--md-sys-color-inverse-surface, #313033);\n }\n\n :host([rich][position='bottom'][has-caret]) .caret {\n border-bottom-color: var(--md-sys-color-surface-container, #EDE7EE);\n }\n\n :host([position='left'][has-caret]) .caret {\n right: -6px;\n top: 50%;\n transform: translateY(-50%);\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-left: 6px solid var(--md-sys-color-inverse-surface, #313033);\n }\n\n :host([rich][position='left'][has-caret]) .caret {\n border-left-color: var(--md-sys-color-surface-container, #EDE7EE);\n }\n\n :host([position='right'][has-caret]) .caret {\n left: -6px;\n top: 50%;\n transform: translateY(-50%);\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 6px solid var(--md-sys-color-inverse-surface, #313033);\n }\n\n :host([rich][position='right'][has-caret]) .caret {\n border-right-color: var(--md-sys-color-surface-container, #EDE7EE);\n }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { tooltipStyles } from './tooltip.css.js';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Material Design 3 Tooltip component.\n * Plain and rich tooltips providing contextual descriptions or interactive details.\n *\n * @element md-tooltip\n *\n * @slot - Default slot for tooltip text or supporting content.\n * @slot headline - Custom headline/subhead element for rich tooltips.\n * @slot actions - Custom action buttons for rich tooltips.\n * @slot anchor - Slotted anchor element (optional).\n *\n * @fires open - Dispatched when the tooltip becomes visible.\n * @fires close - Dispatched when the tooltip is hidden.\n * @fires action - Dispatched when the rich tooltip action button is clicked.\n */\n@customElement('md-tooltip')\nexport class MdTooltip extends MdBaseElement {\n static override styles = [MdBaseElement.styles, tooltipStyles];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String, reflect: true })\n position: TooltipPosition = 'bottom';\n\n @property({ type: Boolean, reflect: true })\n rich = false;\n\n @property({ type: String, reflect: true })\n for = '';\n\n @property({ type: String })\n value = '';\n\n @property({ type: String })\n text = '';\n\n @property({ type: String })\n headline = '';\n\n @property({ type: String, attribute: 'action-text' })\n actionText = '';\n\n @property({ type: Number, attribute: 'show-delay' })\n showDelay = 500;\n\n @property({ type: Number, attribute: 'hide-delay' })\n hideDelay = 150;\n\n @property({ type: Number })\n get delay(): number {\n return this.showDelay;\n }\n\n set delay(val: number) {\n this.showDelay = val;\n }\n\n @property({ type: Boolean, reflect: true })\n persistent = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'has-caret' })\n hasCaret = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @query('.tooltip')\n tooltipPanel!: HTMLElement;\n\n private _anchorElement: HTMLElement | null = null;\n private _boundAnchor: HTMLElement | null = null;\n private _showTimer: ReturnType<typeof setTimeout> | null = null;\n private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n\n get anchor(): HTMLElement | null {\n return this._anchorElement || this.resolveAnchorElement();\n }\n\n set anchor(element: HTMLElement | null) {\n this._anchorElement = element;\n this.bindAnchorEvents();\n }\n\n get target(): HTMLElement | null {\n return this.anchor;\n }\n\n set target(element: HTMLElement | null) {\n this.anchor = element;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleKeyDown);\n window.addEventListener('resize', this.handleWindowChange);\n window.addEventListener('scroll', this.handleWindowChange, true);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.bindAnchorEvents();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this.handleKeyDown);\n window.removeEventListener('resize', this.handleWindowChange);\n window.removeEventListener('scroll', this.handleWindowChange, true);\n document.removeEventListener('pointerdown', this.handleDocumentClick);\n this.unbindAnchorEvents();\n this.clearTimers();\n }\n\n override firstUpdated() {\n this.bindAnchorEvents();\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('for')) {\n this.bindAnchorEvents();\n }\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.updatePosition();\n this.emitEvent('open', { target: this });\n } else {\n this.emitEvent('close', { target: this });\n }\n }\n\n if (changedProperties.has('position') && this.open) {\n this.updatePosition();\n }\n }\n\n private resolveAnchorElement(): HTMLElement | null {\n if (this._anchorElement) {\n return this._anchorElement;\n }\n\n if (this.for) {\n const root = this.getRootNode() as Document | ShadowRoot;\n const el = root?.getElementById\n ? root.getElementById(this.for)\n : document.getElementById(this.for);\n if (el) return el;\n }\n\n // Check slotted anchor\n const slottedAnchor = this.querySelector('[slot=\"anchor\"]') as HTMLElement;\n if (slottedAnchor) return slottedAnchor;\n\n // Check previous sibling\n if (this.previousElementSibling instanceof HTMLElement) {\n return this.previousElementSibling;\n }\n\n // Check parent element if not body / html\n if (\n this.parentElement &&\n this.parentElement !== document.body &&\n this.parentElement !== document.documentElement\n ) {\n return this.parentElement;\n }\n\n return null;\n }\n\n private bindAnchorEvents() {\n const anchor = this.resolveAnchorElement();\n if (anchor === this._boundAnchor) return;\n\n this.unbindAnchorEvents();\n this._boundAnchor = anchor;\n\n if (this._boundAnchor) {\n this._boundAnchor.addEventListener('mouseenter', this.handleAnchorMouseEnter);\n this._boundAnchor.addEventListener('mouseleave', this.handleAnchorMouseLeave);\n this._boundAnchor.addEventListener('focusin', this.handleAnchorFocus);\n this._boundAnchor.addEventListener('focusout', this.handleAnchorBlur);\n }\n }\n\n private unbindAnchorEvents() {\n if (this._boundAnchor) {\n this._boundAnchor.removeEventListener('mouseenter', this.handleAnchorMouseEnter);\n this._boundAnchor.removeEventListener('mouseleave', this.handleAnchorMouseLeave);\n this._boundAnchor.removeEventListener('focusin', this.handleAnchorFocus);\n this._boundAnchor.removeEventListener('focusout', this.handleAnchorBlur);\n this._boundAnchor = null;\n }\n }\n\n private clearTimers() {\n if (this._showTimer !== null) {\n clearTimeout(this._showTimer);\n this._showTimer = null;\n }\n if (this._hideTimer !== null) {\n clearTimeout(this._hideTimer);\n this._hideTimer = null;\n }\n }\n\n private handleAnchorMouseEnter = () => {\n if (this.disabled) return;\n this.clearTimers();\n if (this.showDelay > 0) {\n this._showTimer = setTimeout(() => {\n this.show();\n }, this.showDelay);\n } else {\n this.show();\n }\n };\n\n private handleAnchorMouseLeave = () => {\n if (this.disabled || this.persistent) return;\n if (this._showTimer !== null) {\n clearTimeout(this._showTimer);\n this._showTimer = null;\n }\n if (this.hideDelay > 0) {\n this._hideTimer = setTimeout(() => {\n this.hide();\n }, this.hideDelay);\n } else {\n this.hide();\n }\n };\n\n private handleAnchorFocus = () => {\n if (this.disabled) return;\n this.clearTimers();\n this.show();\n };\n\n private handleAnchorBlur = () => {\n if (this.disabled || this.persistent) return;\n this.clearTimers();\n this.hide();\n };\n\n private handleTooltipMouseEnter = () => {\n if (this.rich && this.open) {\n if (this._hideTimer !== null) {\n clearTimeout(this._hideTimer);\n this._hideTimer = null;\n }\n }\n };\n\n private handleTooltipMouseLeave = () => {\n if (this.rich && this.open && !this.persistent) {\n this.handleAnchorMouseLeave();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.open) {\n this.hide();\n }\n };\n\n private handleWindowChange = () => {\n if (this.open) {\n this.updatePosition();\n }\n };\n\n private handleDocumentClick = (event: PointerEvent | MouseEvent) => {\n if (!this.open || !this.rich) return;\n const path = event.composedPath();\n const anchor = this.resolveAnchorElement();\n\n if (!path.includes(this) && (!anchor || !path.includes(anchor))) {\n this.hide();\n }\n };\n\n private handleActionClick = () => {\n this.emitEvent('action', { target: this });\n if (!this.persistent) {\n this.hide();\n }\n };\n\n /**\n * Shows the tooltip.\n */\n show() {\n if (this.disabled || this.open) return;\n this.open = true;\n this.updatePosition();\n }\n\n /**\n * Hides the tooltip.\n */\n hide() {\n if (!this.open) return;\n this.open = false;\n }\n\n /**\n * Alias for hide().\n */\n close() {\n this.hide();\n }\n\n /**\n * Toggles visibility of the tooltip.\n */\n toggle() {\n if (this.open) {\n this.hide();\n } else {\n this.show();\n }\n }\n\n /**\n * Updates coordinates of the floating tooltip relative to the anchor.\n */\n updatePosition() {\n if (!this.tooltipPanel) return;\n\n const anchor = this.resolveAnchorElement();\n if (!anchor) return;\n\n const anchorRect = anchor.getBoundingClientRect();\n const tooltipRect = this.tooltipPanel.getBoundingClientRect();\n\n // If dimensions are not yet available (e.g. initial render / Happy DOM)\n const tWidth = tooltipRect.width || (this.rich ? 220 : 80);\n const tHeight = tooltipRect.height || (this.rich ? 80 : 24);\n\n const offset = this.rich ? 8 : 4;\n let top = 0;\n let left = 0;\n\n switch (this.position) {\n case 'top':\n top = anchorRect.top - tHeight - offset;\n left = anchorRect.left + (anchorRect.width - tWidth) / 2;\n break;\n case 'bottom':\n top = anchorRect.bottom + offset;\n left = anchorRect.left + (anchorRect.width - tWidth) / 2;\n break;\n case 'left':\n top = anchorRect.top + (anchorRect.height - tHeight) / 2;\n left = anchorRect.left - tWidth - offset;\n break;\n case 'right':\n top = anchorRect.top + (anchorRect.height - tHeight) / 2;\n left = anchorRect.right + offset;\n break;\n }\n\n // Viewport boundaries clamping\n const padding = 8;\n const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1024;\n const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 768;\n\n left = Math.max(padding, Math.min(left, viewportWidth - tWidth - padding));\n top = Math.max(padding, Math.min(top, viewportHeight - tHeight - padding));\n\n this.tooltipPanel.style.top = `${top}px`;\n this.tooltipPanel.style.left = `${left}px`;\n }\n\n override render() {\n const displayText = this.value || this.text;\n\n return html`\n <slot name=\"anchor\"></slot>\n\n <div\n class=\"tooltip\"\n role=\"tooltip\"\n aria-hidden=${this.open ? 'false' : 'true'}\n @mouseenter=${this.handleTooltipMouseEnter}\n @mouseleave=${this.handleTooltipMouseLeave}\n >\n <span class=\"caret\" aria-hidden=\"true\"></span>\n\n ${this.rich\n ? html`\n ${this.headline\n ? html`<h3 class=\"headline\"><slot name=\"headline\">${this.headline}</slot></h3>`\n : html`<slot name=\"headline\"></slot>`}\n <div class=\"supporting-text\">\n <slot>${displayText}</slot>\n </div>\n ${this.actionText || this.querySelector('[slot=\"actions\"]')\n ? html`\n <div class=\"actions\">\n <slot name=\"actions\">\n ${this.actionText\n ? html`\n <button\n type=\"button\"\n class=\"action-button\"\n @click=${this.handleActionClick}\n >\n ${this.actionText}\n </button>\n `\n : nothing}\n </slot>\n </div>\n `\n : nothing}\n `\n : html`\n <span class=\"content\">\n <slot>${displayText}</slot>\n </span>\n `}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-tooltip': MdTooltip;\n }\n}\n"],"mappings":";;;AAEA,IAAa,IAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCqBhB,IAAN,cAAwB,EAAc;AAAA;iBAIpC,KAAA,OAAA,IAGqB,KAAA,WAAA,UAGrB,KAAA,OAAA,IAGD,KAAA,MAAA,IAGE,KAAA,QAAA,IAGD,KAAA,OAAA,IAGI,KAAA,WAAA,IAGE,KAAA,aAAA,IAGD,KAAA,YAAA,KAGA,KAAA,YAAA,KAYC,KAAA,aAAA,IAGF,KAAA,WAAA,IAGA,KAAA,WAAA,IAKkC,KAAA,iBAAA,MACF,KAAA,eAAA,MACgB,KAAA,aAAA,MACA,KAAA,aAAA,MAqIpB,KAAA,yBAAA,MAAA;AACrC,MAAI,KAAK,aACT,KAAK,YAAY,GACb,KAAK,YAAY,IACnB,KAAK,aAAa,WAAA,MAAiB;AACjC,aAAK,KAAK;AAAA,MACZ,GAAG,KAAK,SAAS,IAEjB,KAAK,KAAK;AAAA,IAEd,GAEuC,KAAA,yBAAA,MAAA;AACrC,MAAI,KAAK,YAAY,KAAK,eACtB,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa,OAEhB,KAAK,YAAY,IACnB,KAAK,aAAa,WAAA,MAAiB;AACjC,aAAK,KAAK;AAAA,MACZ,GAAG,KAAK,SAAS,IAEjB,KAAK,KAAK;AAAA,IAEd,GAEkC,KAAA,oBAAA,MAAA;AAChC,MAAI,KAAK,aACT,KAAK,YAAY,GACjB,KAAK,KAAK;AAAA,IACZ,GAEiC,KAAA,mBAAA,MAAA;AAC/B,MAAI,KAAK,YAAY,KAAK,eAC1B,KAAK,YAAY,GACjB,KAAK,KAAK;AAAA,IACZ,GAEwC,KAAA,0BAAA,MAAA;AACtC,MAAI,KAAK,QAAQ,KAAK,QAChB,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa;AAAA,IAGxB,GAEwC,KAAA,0BAAA,MAAA;AACtC,MAAI,KAAK,QAAQ,KAAK,QAAQ,CAAC,KAAK,cAClC,KAAK,uBAAuB;AAAA,IAEhC,GAEyB,KAAA,gBAAA,CAAA,MAAyB;AAChD,MAAI,EAAM,QAAQ,YAAY,KAAK,QACjC,KAAK,KAAK;AAAA,IAEd,GAEmC,KAAA,qBAAA,MAAA;AACjC,MAAI,KAAK,QACP,KAAK,eAAe;AAAA,IAExB,GAE+B,KAAA,sBAAA,CAAA,MAAqC;AAClE,UAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,KAAM;AAC9B,YAAM,IAAO,EAAM,aAAa,GAC1B,IAAS,KAAK,qBAAqB;AAEzC,MAAI,CAAC,EAAK,SAAS,IAAI,MAAM,CAAC,KAAU,CAAC,EAAK,SAAS,CAAM,MAC3D,KAAK,KAAK;AAAA,IAEd,GAEkC,KAAA,oBAAA,MAAA;AAChC,WAAK,UAAU,UAAU,EAAE,QAAQ,KAAK,CAAC,GACpC,KAAK,cACR,KAAK,KAAK;AAAA,IAEd;AAAA;;AA9QyB,SAAA,SAAA,CAAC,EAAc,QAAQ,CAAa;AAAA;EAgC7D,IACI,QAAgB;AAClB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,MAAM,GAAa;AACrB,SAAK,YAAY;AAAA,EACnB;AAAA,EAmBA,IAAI,SAA6B;AAC/B,WAAO,KAAK,kBAAkB,KAAK,qBAAqB;AAAA,EAC1D;AAAA,EAEA,IAAI,OAAO,GAA6B;AACtC,SAAK,iBAAiB,GACtB,KAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,IAAI,SAA6B;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,OAAO,GAA6B;AACtC,SAAK,SAAS;AAAA,EAChB;AAAA,EAEA,oBAA6B;AAC3B,UAAM,kBAAkB,GACxB,OAAO,iBAAiB,WAAW,KAAK,aAAa,GACrD,OAAO,iBAAiB,UAAU,KAAK,kBAAkB,GACzD,OAAO,iBAAiB,UAAU,KAAK,oBAAoB,EAAI,GAC/D,SAAS,iBAAiB,eAAe,KAAK,mBAAmB,GACjE,KAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,uBAAgC;AAC9B,UAAM,qBAAqB,GAC3B,OAAO,oBAAoB,WAAW,KAAK,aAAa,GACxD,OAAO,oBAAoB,UAAU,KAAK,kBAAkB,GAC5D,OAAO,oBAAoB,UAAU,KAAK,oBAAoB,EAAI,GAClE,SAAS,oBAAoB,eAAe,KAAK,mBAAmB,GACpE,KAAK,mBAAmB,GACxB,KAAK,YAAY;AAAA,EACnB;AAAA,EAEA,eAAwB;AACtB,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEA,QAAiB,GAAyC;AACxD,UAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,KAAK,KAC7B,KAAK,iBAAiB,GAGpB,EAAkB,IAAI,MAAM,MAC1B,KAAK,QACP,KAAK,eAAe,GACpB,KAAK,UAAU,QAAQ,EAAE,QAAQ,KAAK,CAAC,KAEvC,KAAK,UAAU,SAAS,EAAE,QAAQ,KAAK,CAAC,IAIxC,EAAkB,IAAI,UAAU,KAAK,KAAK,QAC5C,KAAK,eAAe;AAAA,EAExB;AAAA,EAEA,uBAAmD;AACjD,QAAI,KAAK,eACP,QAAO,KAAK;AAGd,QAAI,KAAK,KAAK;AACZ,YAAM,IAAO,KAAK,YAAY,GACxB,IAAK,GAAM,iBACb,EAAK,eAAe,KAAK,GAAG,IAC5B,SAAS,eAAe,KAAK,GAAG;AACpC,UAAI,EAAI,QAAO;AAAA,IACjB;AAGA,UAAM,IAAgB,KAAK,cAAc,iBAAiB;AAC1D,WAAI,MAGA,KAAK,kCAAkC,cAClC,KAAK,yBAKZ,KAAK,iBACL,KAAK,kBAAkB,SAAS,QAChC,KAAK,kBAAkB,SAAS,kBAEzB,KAAK,gBAGP;AAAA,EACT;AAAA,EAEA,mBAA2B;AACzB,UAAM,IAAS,KAAK,qBAAqB;AACzC,IAAI,MAAW,KAAK,iBAEpB,KAAK,mBAAmB,GACxB,KAAK,eAAe,GAEhB,KAAK,iBACP,KAAK,aAAa,iBAAiB,cAAc,KAAK,sBAAsB,GAC5E,KAAK,aAAa,iBAAiB,cAAc,KAAK,sBAAsB,GAC5E,KAAK,aAAa,iBAAiB,WAAW,KAAK,iBAAiB,GACpE,KAAK,aAAa,iBAAiB,YAAY,KAAK,gBAAgB;AAAA,EAExE;AAAA,EAEA,qBAA6B;AAC3B,IAAI,KAAK,iBACP,KAAK,aAAa,oBAAoB,cAAc,KAAK,sBAAsB,GAC/E,KAAK,aAAa,oBAAoB,cAAc,KAAK,sBAAsB,GAC/E,KAAK,aAAa,oBAAoB,WAAW,KAAK,iBAAiB,GACvE,KAAK,aAAa,oBAAoB,YAAY,KAAK,gBAAgB,GACvE,KAAK,eAAe;AAAA,EAExB;AAAA,EAEA,cAAsB;AACpB,IAAI,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa,OAEhB,KAAK,eAAe,SACtB,aAAa,KAAK,UAAU,GAC5B,KAAK,aAAa;AAAA,EAEtB;AAAA,EAwFA,OAAO;AACL,IAAI,KAAK,YAAY,KAAK,SAC1B,KAAK,OAAO,IACZ,KAAK,eAAe;AAAA,EACtB;AAAA,EAKA,OAAO;AACL,IAAK,KAAK,SACV,KAAK,OAAO;AAAA,EACd;AAAA,EAKA,QAAQ;AACN,SAAK,KAAK;AAAA,EACZ;AAAA,EAKA,SAAS;AACP,IAAI,KAAK,OACP,KAAK,KAAK,IAEV,KAAK,KAAK;AAAA,EAEd;AAAA,EAKA,iBAAiB;AACf,QAAI,CAAC,KAAK,aAAc;AAExB,UAAM,IAAS,KAAK,qBAAqB;AACzC,QAAI,CAAC,EAAQ;AAEb,UAAM,IAAa,EAAO,sBAAsB,GAC1C,IAAc,KAAK,aAAa,sBAAsB,GAGtD,IAAS,EAAY,UAAU,KAAK,OAAO,MAAM,KACjD,IAAU,EAAY,WAAW,KAAK,OAAO,KAAK,KAElD,IAAS,KAAK,OAAO,IAAI;AAC/B,QAAI,IAAM,GACN,IAAO;AAEX,YAAQ,KAAK,UAAb;AAAA,MACE,KAAK;AACH,QAAA,IAAM,EAAW,MAAM,IAAU,GACjC,IAAO,EAAW,QAAQ,EAAW,QAAQ,KAAU;AACvD;AAAA,MACF,KAAK;AACH,QAAA,IAAM,EAAW,SAAS,GAC1B,IAAO,EAAW,QAAQ,EAAW,QAAQ,KAAU;AACvD;AAAA,MACF,KAAK;AACH,QAAA,IAAM,EAAW,OAAO,EAAW,SAAS,KAAW,GACvD,IAAO,EAAW,OAAO,IAAS;AAClC;AAAA,MACF,KAAK;AACH,QAAA,IAAM,EAAW,OAAO,EAAW,SAAS,KAAW,GACvD,IAAO,EAAW,QAAQ;AAAA,IAE9B;AAGA,UAAM,IAAU,GACV,IAAgB,OAAO,SAAW,MAAc,OAAO,aAAa,MACpE,IAAiB,OAAO,SAAW,MAAc,OAAO,cAAc;AAE5E,IAAA,IAAO,KAAK,IAAI,GAAS,KAAK,IAAI,GAAM,IAAgB,IAAS,CAAO,CAAC,GACzE,IAAM,KAAK,IAAI,GAAS,KAAK,IAAI,GAAK,IAAiB,IAAU,CAAO,CAAC,GAEzE,KAAK,aAAa,MAAM,MAAM,GAAG,CAAA,MACjC,KAAK,aAAa,MAAM,OAAO,GAAG,CAAA;AAAA,EACpC;AAAA,EAEA,SAAkB;AAChB,UAAM,IAAc,KAAK,SAAS,KAAK;AAEvC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMW,KAAK,OAAO,UAAU,MAAA;AAAA,sBACtB,KAAK,uBAAA;AAAA,sBACL,KAAK,uBAAA;AAAA;AAAA;AAAA;AAAA,UAIjB,KAAK,OACH;AAAA,gBACI,KAAK,WACH,+CAAkD,KAAK,QAAA,iBACvD,gCAAI;AAAA;AAAA,wBAEE,CAAA;AAAA;AAAA,gBAER,KAAK,cAAc,KAAK,cAAc,kBAAkB,IACtD;AAAA;AAAA;AAAA,0BAGQ,KAAK,aACH;AAAA;AAAA;AAAA;AAAA,yCAIa,KAAK,iBAAA;AAAA;AAAA,kCAEZ,KAAK,UAAA;AAAA;AAAA,gCAGX,CAAA;AAAA;AAAA;AAAA,sBAIV,CAAA;AAAA,gBAEN;AAAA;AAAA,wBAEY,CAAA;AAAA;AAAA,aAEV;AAAA;AAAA;AAAA,EAGZ;AACF;AAvZG,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGxC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,MAAA;AAGxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,MAAA;AAGzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAc,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,MAAA;AAGnD,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAGlD,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,MAAA;AAGlD,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA;AASzB,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,MAAA;AAGzC,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAA,EAAM,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGjE,EAAA,CAAA,EAAS;AAAA,EAAE,MAAM;AAAA,EAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,MAAA;AAGzC,EAAA,CAAA,EAAM,UAAU,CAAA,GAAA,EAAA,WAAA,gBAAA,MAAA;AApDlB,IAAA,EAAA,CAAA,EAAc,YAAY,CAAA,GAAA,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bottom-sheet.css.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA+O7B,CAAC"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
export type BottomSheetType = 'standard' | 'modal';
|
|
3
|
+
/**
|
|
4
|
+
* Material Design 3 Bottom Sheet component.
|
|
5
|
+
*
|
|
6
|
+
* Bottom sheets display supplementary content anchored to the bottom of the screen,
|
|
7
|
+
* supporting standard (in-flow / docked panel) and modal (overlay with scrim) modes,
|
|
8
|
+
* drag handle gestures, touch swipe-to-dismiss, and customizable headers and footers.
|
|
9
|
+
*
|
|
10
|
+
* @slot - Default slot for main sheet body content.
|
|
11
|
+
* @slot drag-handle - Custom drag handle element.
|
|
12
|
+
* @slot header - Full header area replacement.
|
|
13
|
+
* @slot headline - Custom title / headline content.
|
|
14
|
+
* @slot subhead - Custom subtitle / subhead content.
|
|
15
|
+
* @slot header-actions - Additional actions next to the close button in the header.
|
|
16
|
+
* @slot close-button - Custom close button element.
|
|
17
|
+
* @slot footer - Bottom actions / footer area.
|
|
18
|
+
* @slot actions - Action buttons container inside the default footer.
|
|
19
|
+
*/
|
|
20
|
+
export declare class MdBottomSheet extends MdBaseElement {
|
|
21
|
+
static styles: import('lit').CSSResultGroup[];
|
|
22
|
+
open: boolean;
|
|
23
|
+
type: BottomSheetType;
|
|
24
|
+
modal: boolean;
|
|
25
|
+
headline: string;
|
|
26
|
+
subhead: string;
|
|
27
|
+
hideDragHandle: boolean;
|
|
28
|
+
hideCloseButton: boolean;
|
|
29
|
+
divider: boolean;
|
|
30
|
+
fullscreen: boolean;
|
|
31
|
+
private sheetElement?;
|
|
32
|
+
private isDragging;
|
|
33
|
+
private dragStartY;
|
|
34
|
+
private currentDragY;
|
|
35
|
+
private activePointerId;
|
|
36
|
+
connectedCallback(): void;
|
|
37
|
+
disconnectedCallback(): void;
|
|
38
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
39
|
+
/**
|
|
40
|
+
* Returns whether the bottom sheet is currently functioning in modal mode.
|
|
41
|
+
*/
|
|
42
|
+
isModalMode(): boolean;
|
|
43
|
+
private handleKeyDown;
|
|
44
|
+
private handleScrimClick;
|
|
45
|
+
private handleCloseClick;
|
|
46
|
+
private handleDragPointerDown;
|
|
47
|
+
private handlePointerMove;
|
|
48
|
+
private handlePointerUp;
|
|
49
|
+
private cleanupDragListeners;
|
|
50
|
+
/**
|
|
51
|
+
* Opens the bottom sheet.
|
|
52
|
+
*/
|
|
53
|
+
show(): void;
|
|
54
|
+
/**
|
|
55
|
+
* Closes the bottom sheet.
|
|
56
|
+
*/
|
|
57
|
+
close(): void;
|
|
58
|
+
/**
|
|
59
|
+
* Toggles the open/closed state of the bottom sheet.
|
|
60
|
+
*/
|
|
61
|
+
toggle(): void;
|
|
62
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
63
|
+
}
|
|
64
|
+
declare global {
|
|
65
|
+
interface HTMLElementTagNameMap {
|
|
66
|
+
'md-bottom-sheet': MdBottomSheet;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=bottom-sheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bottom-sheet.d.ts","sourceRoot":"","sources":["../../../src/components/bottom-sheet/bottom-sheet.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iBAAiB,CAAC;AACzB,OAAO,+BAA+B,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,iCAA6C;IAGnE,IAAI,UAAS;IAGb,IAAI,EAAE,eAAe,CAAc;IAGnC,KAAK,UAAS;IAGd,QAAQ,SAAM;IAGd,OAAO,SAAM;IAGb,cAAc,UAAS;IAGvB,eAAe,UAAS;IAGxB,OAAO,UAAS;IAGhB,UAAU,UAAS;IAGnB,OAAO,CAAC,YAAY,CAAC,CAAc;IAGnC,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,eAAe,CAAuB;IAErC,iBAAiB;IAKjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWxD;;OAEG;IACH,WAAW,IAAI,OAAO;IAItB,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,qBAAqB,CAqB3B;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAEF,OAAO,CAAC,eAAe,CAsBrB;IAEF,OAAO,CAAC,oBAAoB;IAM5B;;OAEG;IACH,IAAI;IAIJ;;OAEG;IACH,KAAK;IAIL;;OAEG;IACH,MAAM;IAIG,MAAM;CAkFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.css.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"button.css.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA2JxB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.css.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,yBA4D7B,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
import { ButtonVariant } from '../button/button.js';
|
|
3
|
+
export type ButtonGroupOrientation = 'horizontal' | 'vertical';
|
|
4
|
+
export type ButtonGroupShape = 'pill' | 'rounded' | 'square';
|
|
5
|
+
export declare class MdButtonGroup extends MdBaseElement {
|
|
6
|
+
static styles: import('lit').CSSResultGroup[];
|
|
7
|
+
orientation: ButtonGroupOrientation;
|
|
8
|
+
connected: boolean;
|
|
9
|
+
shape: ButtonGroupShape;
|
|
10
|
+
variant: ButtonVariant | '';
|
|
11
|
+
fullWidth: boolean;
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
private slottedElements;
|
|
14
|
+
connectedCallback(): void;
|
|
15
|
+
disconnectedCallback(): void;
|
|
16
|
+
updated(changedProperties: Map<string, unknown>): void;
|
|
17
|
+
private handleSlotChange;
|
|
18
|
+
private getInteractiveChildren;
|
|
19
|
+
private syncChildren;
|
|
20
|
+
private handleKeyDown;
|
|
21
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
22
|
+
}
|
|
23
|
+
declare global {
|
|
24
|
+
interface HTMLElementTagNameMap {
|
|
25
|
+
'md-button-group': MdButtonGroup;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
//# sourceMappingURL=button-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC/D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE7D,qBACa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,iCAA6C;IAGnE,WAAW,EAAE,sBAAsB,CAAgB;IAGnD,SAAS,UAAS;IAGlB,KAAK,EAAE,gBAAgB,CAAU;IAGjC,OAAO,EAAE,aAAa,GAAG,EAAE,CAAM;IAGjC,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,OAAO,CAAC,eAAe,CAAiB;IAE/B,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAaxD,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,YAAY;IAyEpB,OAAO,CAAC,aAAa,CA2BnB;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { MdBaseElement } from '../../internal/base-component.js';
|
|
2
|
+
export type CarouselSnapAlign = 'start' | 'center' | 'end';
|
|
3
|
+
/**
|
|
4
|
+
* Material Design 3 Carousel Item component.
|
|
5
|
+
*
|
|
6
|
+
* @slot - Default slot for custom content or media.
|
|
7
|
+
* @slot media - Specific slot for image or video elements.
|
|
8
|
+
* @slot headline - Custom headline content.
|
|
9
|
+
* @slot subhead - Custom subhead or description content.
|
|
10
|
+
*/
|
|
11
|
+
export declare class MdCarouselItem extends MdBaseElement {
|
|
12
|
+
static styles: import('lit').CSSResultGroup[];
|
|
13
|
+
src: string;
|
|
14
|
+
alt: string;
|
|
15
|
+
headline: string;
|
|
16
|
+
subhead: string;
|
|
17
|
+
href: string;
|
|
18
|
+
target: string;
|
|
19
|
+
interactive: boolean;
|
|
20
|
+
disabled: boolean;
|
|
21
|
+
snapAlign: CarouselSnapAlign;
|
|
22
|
+
layout: string;
|
|
23
|
+
connectedCallback(): void;
|
|
24
|
+
disconnectedCallback(): void;
|
|
25
|
+
private handleClick;
|
|
26
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
27
|
+
}
|
|
28
|
+
declare global {
|
|
29
|
+
interface HTMLElementTagNameMap {
|
|
30
|
+
'md-carousel-item': MdCarouselItem;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=carousel-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"carousel-item.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel-item.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,iCAAiC,CAAC;AACzC,OAAO,yCAAyC,CAAC;AAGjD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE3D;;;;;;;GAOG;AACH,qBACa,cAAe,SAAQ,aAAa;IAC/C,OAAgB,MAAM,iCAA8C;IAGpE,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,QAAQ,SAAM;IAGd,OAAO,SAAM;IAGb,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,WAAW,UAAS;IAGpB,QAAQ,UAAS;IAGjB,SAAS,EAAE,iBAAiB,CAAW;IAGvC,MAAM,SAAM;IAEH,iBAAiB;IAWjB,oBAAoB;IAK7B,OAAO,CAAC,WAAW,CAOjB;IAEO,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|