@operato/popup 9.0.0-beta.10 → 9.0.0-beta.14
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 +18 -0
- package/dist/src/ox-floating-overlay.js +32 -77
- package/dist/src/ox-floating-overlay.js.map +1 -1
- package/dist/src/ox-popup-list.js +65 -84
- package/dist/src/ox-popup-list.js.map +1 -1
- package/dist/src/ox-popup-menu.js +62 -59
- package/dist/src/ox-popup-menu.js.map +1 -1
- package/dist/src/ox-popup-menuitem.js +47 -49
- package/dist/src/ox-popup-menuitem.js.map +1 -1
- package/dist/src/ox-popup.js +50 -47
- package/dist/src/ox-popup.js.map +1 -1
- package/dist/src/ox-prompt.js +68 -98
- package/dist/src/ox-prompt.js.map +1 -1
- package/dist/stories/ox-popup-list-image-2.stories.d.ts +23 -0
- package/dist/stories/ox-popup-list-image-2.stories.js +133 -0
- package/dist/stories/ox-popup-list-image-2.stories.js.map +1 -0
- package/dist/stories/ox-popup-list-image.stories.d.ts +23 -0
- package/dist/stories/ox-popup-list-image.stories.js +208 -0
- package/dist/stories/ox-popup-list-image.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import '@material/web/all.js';
|
|
2
|
+
import '@operato/input/ox-checkbox.js';
|
|
3
|
+
import '../src/ox-popup-list.js';
|
|
4
|
+
import { html } from 'lit';
|
|
5
|
+
import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'OxPopupList for Image',
|
|
8
|
+
component: 'ox-popup-list',
|
|
9
|
+
argTypes: {
|
|
10
|
+
preventCloseOnBlur: { control: 'boolean' }
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
function popup(e, preventCloseOnBlur) {
|
|
14
|
+
const popupList = document.querySelector('#popup-list');
|
|
15
|
+
popupList.preventCloseOnBlur = preventCloseOnBlur;
|
|
16
|
+
popupList?.open({
|
|
17
|
+
top: e.offsetY,
|
|
18
|
+
left: e.offsetX
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
const Template = ({ preventCloseOnBlur }) => html `
|
|
22
|
+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
23
|
+
|
|
24
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
25
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
26
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
27
|
+
|
|
28
|
+
<link
|
|
29
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
30
|
+
rel="stylesheet"
|
|
31
|
+
/>
|
|
32
|
+
<link
|
|
33
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
34
|
+
rel="stylesheet"
|
|
35
|
+
/>
|
|
36
|
+
<link
|
|
37
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
38
|
+
rel="stylesheet"
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<style>
|
|
42
|
+
${MDTypeScaleStyles.cssText}
|
|
43
|
+
</style>
|
|
44
|
+
|
|
45
|
+
<style>
|
|
46
|
+
#container {
|
|
47
|
+
display: flex;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
#noise {
|
|
51
|
+
width: 100px;
|
|
52
|
+
height: 100px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
#place {
|
|
56
|
+
position: fixed;
|
|
57
|
+
top: 50%;
|
|
58
|
+
left: 50%;
|
|
59
|
+
transform: translate(-50%, -50%);
|
|
60
|
+
|
|
61
|
+
width: 50%;
|
|
62
|
+
height: 50%;
|
|
63
|
+
text-align: center;
|
|
64
|
+
|
|
65
|
+
background-color: var(--md-sys-color-primary-container);
|
|
66
|
+
color: var(--md-sys-color-on-primary-container);
|
|
67
|
+
border: 2px solid var(--md-sys-color-primary);
|
|
68
|
+
}
|
|
69
|
+
</style>
|
|
70
|
+
|
|
71
|
+
<style>
|
|
72
|
+
.line-type {
|
|
73
|
+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)
|
|
74
|
+
50% 0 no-repeat;
|
|
75
|
+
min-height: 30px;
|
|
76
|
+
padding: 3px 7px;
|
|
77
|
+
width: 30px;
|
|
78
|
+
float: left;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.arrow-type {
|
|
82
|
+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAXcCAYAAABgSd3kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM4M0UyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4NEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzgxRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzgyRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BB9i0AAAE+dJREFUeNrs3QmQ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c6hLuG3QDJdfXR3wiWaA6OqAOyd+HzHZ7atr3LDaX/KBz2dEW9HHxEEUEaIfH7Rbe5HPl99zJcdLelL9rJVyHVXts1bkCUyXKRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQJoRklcHnbZnHGci9JoUvYNua8l0yXWSNXwfWvpvf1cy13y6hJvXc0S3pNX9Qf8g2Tx1SEtLS9qgPYzdivZsSVtqkGW2RSKtjrmghkjOd6BRvg2tStVu7BJvt/gO6ZTsKpmQ+H2ktbW1rwEnoSacaj9koeTHkkskS1K5IWbQRfSIsX2/81K//KaE0U2CD5PsWS8i7lUraUCv5HrJcMntmX3WSriej/pZK/J9jg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECANCMkzV1cdf2fOyT3St6v9+cUoYNuF8lkYzdxvF9yoLHdP94OrUGSbxi7JNu/jO340d6sAT7PkdWM3eBUu+Vel1wp2c73ya5b0k6SzDS2r1E754alPtkT3le3vLTRTDvndInDp9xF4m7Je75efrVx8suSayRvSR7M/fJbZy2r94zkta9ueXW6g9d2p/mpzpEUaoF71/Xgny3snb1KfWjsfrt68NpF2pPUD84CstjYJT314B8wtgHTn89axjbxN/xZK/Lljg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECaBfJfAQYAxqnBZanFUNgAAAAASUVORK5CYII=)
|
|
83
|
+
50% 0 no-repeat;
|
|
84
|
+
min-height: 30px;
|
|
85
|
+
padding: 3px 7px;
|
|
86
|
+
width: 30px;
|
|
87
|
+
float: left;
|
|
88
|
+
}
|
|
89
|
+
.arrow-type.begin-no {
|
|
90
|
+
background-position: 50% 16px;
|
|
91
|
+
}
|
|
92
|
+
.arrow-type.begin-arrow {
|
|
93
|
+
background-position: 50% -39px;
|
|
94
|
+
}
|
|
95
|
+
.arrow-type.begin-open-arrow {
|
|
96
|
+
background-position: 50% -89px;
|
|
97
|
+
}
|
|
98
|
+
.arrow-type.begin-stealth-arrow {
|
|
99
|
+
background-position: 50% -139px;
|
|
100
|
+
}
|
|
101
|
+
.arrow-type.begin-diamond-arrow {
|
|
102
|
+
background-position: 50% -190px;
|
|
103
|
+
}
|
|
104
|
+
.arrow-type.begin-oval-arrow {
|
|
105
|
+
background-position: 50% -238px;
|
|
106
|
+
}
|
|
107
|
+
.arrow-type.begin-size1 {
|
|
108
|
+
background-position: 50% -286px;
|
|
109
|
+
}
|
|
110
|
+
.arrow-type.begin-size2 {
|
|
111
|
+
background-position: 50% -336px;
|
|
112
|
+
}
|
|
113
|
+
.arrow-type.begin-size3 {
|
|
114
|
+
background-position: 50% -386px;
|
|
115
|
+
}
|
|
116
|
+
.arrow-type.begin-size4 {
|
|
117
|
+
background-position: 50% -436px;
|
|
118
|
+
}
|
|
119
|
+
.arrow-type.begin-size5 {
|
|
120
|
+
background-position: 50% -486px;
|
|
121
|
+
}
|
|
122
|
+
.arrow-type.begin-size6 {
|
|
123
|
+
background-position: 50% -536px;
|
|
124
|
+
}
|
|
125
|
+
.arrow-type.begin-size7 {
|
|
126
|
+
background-position: 50% -589px;
|
|
127
|
+
}
|
|
128
|
+
.arrow-type.begin-size8 {
|
|
129
|
+
background-position: 50% -639px;
|
|
130
|
+
}
|
|
131
|
+
.arrow-type.begin-size9 {
|
|
132
|
+
background-position: 50% -689px;
|
|
133
|
+
}
|
|
134
|
+
.arrow-type.end-no {
|
|
135
|
+
background-position: 50% 16px;
|
|
136
|
+
}
|
|
137
|
+
.arrow-type.end-arrow {
|
|
138
|
+
background-position: 50% -739px;
|
|
139
|
+
}
|
|
140
|
+
.arrow-type.end-open-arrow {
|
|
141
|
+
background-position: 50% -789px;
|
|
142
|
+
}
|
|
143
|
+
.arrow-type.end-stealth-arrow {
|
|
144
|
+
background-position: 50% -839px;
|
|
145
|
+
}
|
|
146
|
+
.arrow-type.end-diamond-arrow {
|
|
147
|
+
background-position: 50% -890px;
|
|
148
|
+
}
|
|
149
|
+
.arrow-type.end-oval-arrow {
|
|
150
|
+
background-position: 50% -938px;
|
|
151
|
+
}
|
|
152
|
+
.arrow-type.end-size1 {
|
|
153
|
+
background-position: 50% -986px;
|
|
154
|
+
}
|
|
155
|
+
.arrow-type.end-size2 {
|
|
156
|
+
background-position: 50% -1036px;
|
|
157
|
+
}
|
|
158
|
+
.arrow-type.end-size3 {
|
|
159
|
+
background-position: 50% -1086px;
|
|
160
|
+
}
|
|
161
|
+
.arrow-type.end-size4 {
|
|
162
|
+
background-position: 50% -1136px;
|
|
163
|
+
}
|
|
164
|
+
.arrow-type.end-size5 {
|
|
165
|
+
background-position: 50% -1186px;
|
|
166
|
+
}
|
|
167
|
+
.arrow-type.end-size6 {
|
|
168
|
+
background-position: 50% -1236px;
|
|
169
|
+
}
|
|
170
|
+
.arrow-type.end-size7 {
|
|
171
|
+
background-position: 50% -1289px;
|
|
172
|
+
}
|
|
173
|
+
.arrow-type.end-size8 {
|
|
174
|
+
background-position: 50% -1339px;
|
|
175
|
+
}
|
|
176
|
+
.arrow-type.end-size9 {
|
|
177
|
+
background-position: 50% -1389px;
|
|
178
|
+
}
|
|
179
|
+
</style>
|
|
180
|
+
|
|
181
|
+
<div id="container">
|
|
182
|
+
<div id="noise"></div>
|
|
183
|
+
<div id="place" @click=${(e) => popup(e, preventCloseOnBlur)} class="md-typescale-display-medium">
|
|
184
|
+
Click this to popup list
|
|
185
|
+
<ox-popup-list
|
|
186
|
+
id="popup-list"
|
|
187
|
+
@select=${(e) => console.log('select', e.target)}
|
|
188
|
+
multiple
|
|
189
|
+
?prevent-close-on-blur=${preventCloseOnBlur}
|
|
190
|
+
>
|
|
191
|
+
<div class="arrow-type end-size1" name="size1" option></div>
|
|
192
|
+
<div class="arrow-type end-size2" name="size2" option></div>
|
|
193
|
+
<div class="arrow-type end-size3" name="size3" option></div>
|
|
194
|
+
<div class="arrow-type end-size4" name="size4" option></div>
|
|
195
|
+
<div class="arrow-type end-size5" name="size5" option></div>
|
|
196
|
+
<div class="arrow-type end-size6" name="size6" option></div>
|
|
197
|
+
<div class="arrow-type end-size7" name="size7" option></div>
|
|
198
|
+
<div class="arrow-type end-size8" name="size8" option></div>
|
|
199
|
+
<div class="arrow-type end-size9" name="size9" option></div>
|
|
200
|
+
</ox-popup-list>
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
`;
|
|
204
|
+
export const Regular = Template.bind({});
|
|
205
|
+
Regular.args = {
|
|
206
|
+
preventCloseOnBlur: true
|
|
207
|
+
};
|
|
208
|
+
//# sourceMappingURL=ox-popup-list-image.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-popup-list-image.stories.js","sourceRoot":"","sources":["../../stories/ox-popup-list-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,+BAA+B,CAAA;AACtC,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,iDAAiD,CAAA;AAI7F,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,eAAe;IAC1B,QAAQ,EAAE;QACR,kBAAkB,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAC3C;CACF,CAAA;AAYD,SAAS,KAAK,CAAC,CAAa,EAAE,kBAA2B;IACvD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAgB,CAAA;IACtE,SAAS,CAAC,kBAAkB,GAAG,kBAAkB,CAAA;IAEjD,SAAS,EAAE,IAAI,CAAC;QACd,GAAG,EAAE,CAAC,CAAC,OAAO;QACd,IAAI,EAAE,CAAC,CAAC,OAAO;KAChB,CAAC,CAAA;AACJ,CAAC;AAED,MAAM,QAAQ,GAAoB,CAAC,EAAE,kBAAkB,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBtE,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA6IF,CAAC,CAAa,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC;;;;kBAI1D,CAAC,CAAQ,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC;;iCAE9B,kBAAkB;;;;;;;;;;;;;;CAclD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,kBAAkB,EAAE,IAAI;CACzB,CAAA","sourcesContent":["import '@material/web/all.js'\nimport '@operato/input/ox-checkbox.js'\nimport '../src/ox-popup-list.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'\n\nimport { OxPopupList } from '../src/ox-popup-list.js'\n\nexport default {\n title: 'OxPopupList for Image',\n component: 'ox-popup-list',\n argTypes: {\n preventCloseOnBlur: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n preventCloseOnBlur: boolean\n}\n\nfunction popup(e: MouseEvent, preventCloseOnBlur: boolean) {\n const popupList = document.querySelector('#popup-list') as OxPopupList\n popupList.preventCloseOnBlur = preventCloseOnBlur\n\n popupList?.open({\n top: e.offsetY,\n left: e.offsetX\n })\n}\n\nconst Template: Story<ArgTypes> = ({ preventCloseOnBlur }: ArgTypes) => html`\n <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n ${MDTypeScaleStyles.cssText}\n </style>\n\n <style>\n #container {\n display: flex;\n }\n\n #noise {\n width: 100px;\n height: 100px;\n }\n\n #place {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 50%;\n height: 50%;\n text-align: center;\n\n background-color: var(--md-sys-color-primary-container);\n color: var(--md-sys-color-on-primary-container);\n border: 2px solid var(--md-sys-color-primary);\n }\n </style>\n\n <style>\n .line-type {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAH0CAYAAABFKcHfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM3RkUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4MEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzdERTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzdFRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SQt6uQAAAx5JREFUeNrs20GKwkAQQFFbPFa8UN+ncyHjuaKbQBOVJB3REt/fzIQ4CI8qZlWplDIetKsjAoghSuNom00iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEqO2dpl/6vr/cf3TVuyHnfPZ++X09id0M2PPK5xpxmH3oOnv2/sV7l/f+sUCEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiREGECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiRIhqqr68f7jZzTkn75ffm0TrHCOX9yYRIkRBhAgRoiBChAhRECFChCiIECFCFESIECEKIkSIgggRIkRBhAgRoiBChAhRECFChCiIECFCVFOplLLqVre+Qp96do3+j39rEq1zkHV2eW8SIUIURIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKEKIgQIUIURIgQIQoiRIgQBREiRIiCCBEiRLX09sv7T1y7R/sOk2idg6yzy3uTCBGiIEKECFEQIUKEKIgQIUIURIgQIQoiRIgQBREiREGECBGiIEKECFEQIUKEKIgQIUIURIgQIaql1Zf3a9tzFf+r32ESrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfT1y/uIl/pbP28SrXOQdXZ5bxIhQhREiBAhCiJEiBAFESJEiIIIESJEQYQIEaIgQoQoiBAhQhREiBAhCiJEiBAFESJEiIIIESJEtfRzl/cRL/VNonUOss4u700iRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIUIURIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGiIEKECFEQIUKEKIgQIQoiRIgQBREiRIiCCBEiREGECBGitnQTYAAk0fJFyzB3ywAAAABJRU5ErkJggg==)\n 50% 0 no-repeat;\n min-height: 30px;\n padding: 3px 7px;\n width: 30px;\n float: left;\n }\n\n .arrow-type {\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAXcCAYAAABgSd3kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNzY1MUM4M0UyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNzY1MUM4NEUyRkMxMUU1OTRGRThFMEI4NzFCNjVDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU3NjUxQzgxRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU3NjUxQzgyRTJGQzExRTU5NEZFOEUwQjg3MUI2NUM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+BB9i0AAAE+dJREFUeNrs3QmQ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c6hLuG3QDJdfXR3wiWaA6OqAOyd+HzHZ7atr3LDaX/KBz2dEW9HHxEEUEaIfH7Rbe5HPl99zJcdLelL9rJVyHVXts1bkCUyXKRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQJoRklcHnbZnHGci9JoUvYNua8l0yXWSNXwfWvpvf1cy13y6hJvXc0S3pNX9Qf8g2Tx1SEtLS9qgPYzdivZsSVtqkGW2RSKtjrmghkjOd6BRvg2tStVu7BJvt/gO6ZTsKpmQ+H2ktbW1rwEnoSacaj9koeTHkkskS1K5IWbQRfSIsX2/81K//KaE0U2CD5PsWS8i7lUraUCv5HrJcMntmX3WSriej/pZK/J9jg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECANCMkzV1cdf2fOyT3St6v9+cUoYNuF8lkYzdxvF9yoLHdP94OrUGSbxi7JNu/jO340d6sAT7PkdWM3eBUu+Vel1wp2c73ya5b0k6SzDS2r1E754alPtkT3le3vLTRTDvndInDp9xF4m7Je75efrVx8suSayRvSR7M/fJbZy2r94zkta9ueXW6g9d2p/mpzpEUaoF71/Xgny3snb1KfWjsfrt68NpF2pPUD84CstjYJT314B8wtgHTn89axjbxN/xZK/Lljg46IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECaBfJfAQYAxqnBZanFUNgAAAAASUVORK5CYII=)\n 50% 0 no-repeat;\n min-height: 30px;\n padding: 3px 7px;\n width: 30px;\n float: left;\n }\n .arrow-type.begin-no {\n background-position: 50% 16px;\n }\n .arrow-type.begin-arrow {\n background-position: 50% -39px;\n }\n .arrow-type.begin-open-arrow {\n background-position: 50% -89px;\n }\n .arrow-type.begin-stealth-arrow {\n background-position: 50% -139px;\n }\n .arrow-type.begin-diamond-arrow {\n background-position: 50% -190px;\n }\n .arrow-type.begin-oval-arrow {\n background-position: 50% -238px;\n }\n .arrow-type.begin-size1 {\n background-position: 50% -286px;\n }\n .arrow-type.begin-size2 {\n background-position: 50% -336px;\n }\n .arrow-type.begin-size3 {\n background-position: 50% -386px;\n }\n .arrow-type.begin-size4 {\n background-position: 50% -436px;\n }\n .arrow-type.begin-size5 {\n background-position: 50% -486px;\n }\n .arrow-type.begin-size6 {\n background-position: 50% -536px;\n }\n .arrow-type.begin-size7 {\n background-position: 50% -589px;\n }\n .arrow-type.begin-size8 {\n background-position: 50% -639px;\n }\n .arrow-type.begin-size9 {\n background-position: 50% -689px;\n }\n .arrow-type.end-no {\n background-position: 50% 16px;\n }\n .arrow-type.end-arrow {\n background-position: 50% -739px;\n }\n .arrow-type.end-open-arrow {\n background-position: 50% -789px;\n }\n .arrow-type.end-stealth-arrow {\n background-position: 50% -839px;\n }\n .arrow-type.end-diamond-arrow {\n background-position: 50% -890px;\n }\n .arrow-type.end-oval-arrow {\n background-position: 50% -938px;\n }\n .arrow-type.end-size1 {\n background-position: 50% -986px;\n }\n .arrow-type.end-size2 {\n background-position: 50% -1036px;\n }\n .arrow-type.end-size3 {\n background-position: 50% -1086px;\n }\n .arrow-type.end-size4 {\n background-position: 50% -1136px;\n }\n .arrow-type.end-size5 {\n background-position: 50% -1186px;\n }\n .arrow-type.end-size6 {\n background-position: 50% -1236px;\n }\n .arrow-type.end-size7 {\n background-position: 50% -1289px;\n }\n .arrow-type.end-size8 {\n background-position: 50% -1339px;\n }\n .arrow-type.end-size9 {\n background-position: 50% -1389px;\n }\n </style>\n\n <div id=\"container\">\n <div id=\"noise\"></div>\n <div id=\"place\" @click=${(e: MouseEvent) => popup(e, preventCloseOnBlur)} class=\"md-typescale-display-medium\">\n Click this to popup list\n <ox-popup-list\n id=\"popup-list\"\n @select=${(e: Event) => console.log('select', e.target)}\n multiple\n ?prevent-close-on-blur=${preventCloseOnBlur}\n >\n <div class=\"arrow-type end-size1\" name=\"size1\" option></div>\n <div class=\"arrow-type end-size2\" name=\"size2\" option></div>\n <div class=\"arrow-type end-size3\" name=\"size3\" option></div>\n <div class=\"arrow-type end-size4\" name=\"size4\" option></div>\n <div class=\"arrow-type end-size5\" name=\"size5\" option></div>\n <div class=\"arrow-type end-size6\" name=\"size6\" option></div>\n <div class=\"arrow-type end-size7\" name=\"size7\" option></div>\n <div class=\"arrow-type end-size8\" name=\"size8\" option></div>\n <div class=\"arrow-type end-size9\" name=\"size9\" option></div>\n </ox-popup-list>\n </div>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n preventCloseOnBlur: true\n}\n"]}
|