@proximus/lavender-dropdown 2.0.0-alpha.208 → 2.0.0-alpha.209
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/Dropdown.d.ts +8 -1
- package/dist/custom-elements.json +35 -1
- package/dist/index.es.js +49 -21
- package/dist/vscode.html-custom-data.json +4 -1
- package/dist/web-types.json +9 -3
- package/package.json +1 -1
package/dist/Dropdown.d.ts
CHANGED
|
@@ -17,7 +17,8 @@ export declare class Dropdown extends WithExtraAttributes {
|
|
|
17
17
|
showPopover: () => void;
|
|
18
18
|
hidePopover: () => void;
|
|
19
19
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
20
|
-
|
|
20
|
+
updatePopoverMaxHeight(newValue?: string): void;
|
|
21
|
+
updatePopoverMaxWidth(newValue?: string): void;
|
|
21
22
|
private initPopover;
|
|
22
23
|
private get popoverId();
|
|
23
24
|
private get anchorName();
|
|
@@ -32,4 +33,10 @@ export declare class Dropdown extends WithExtraAttributes {
|
|
|
32
33
|
set manualToggle(value: boolean);
|
|
33
34
|
get popoverHeight(): string | null;
|
|
34
35
|
set popoverHeight(value: string | null);
|
|
36
|
+
get popoverMaxHeight(): string | null;
|
|
37
|
+
set popoverMaxHeight(value: string | null);
|
|
38
|
+
get popoverMaxWidth(): string | null;
|
|
39
|
+
set popoverMaxWidth(value: string | null);
|
|
40
|
+
get inverted(): boolean;
|
|
41
|
+
set inverted(value: boolean);
|
|
35
42
|
}
|
|
@@ -67,7 +67,20 @@
|
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
"kind": "method",
|
|
70
|
-
"name": "
|
|
70
|
+
"name": "updatePopoverMaxHeight",
|
|
71
|
+
"parameters": [
|
|
72
|
+
{
|
|
73
|
+
"name": "newValue",
|
|
74
|
+
"optional": true,
|
|
75
|
+
"type": {
|
|
76
|
+
"text": "string"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
]
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"kind": "method",
|
|
83
|
+
"name": "updatePopoverMaxWidth",
|
|
71
84
|
"parameters": [
|
|
72
85
|
{
|
|
73
86
|
"name": "newValue",
|
|
@@ -129,6 +142,18 @@
|
|
|
129
142
|
{
|
|
130
143
|
"kind": "field",
|
|
131
144
|
"name": "popoverHeight"
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"kind": "field",
|
|
148
|
+
"name": "popoverMaxHeight"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"kind": "field",
|
|
152
|
+
"name": "popoverMaxWidth"
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"kind": "field",
|
|
156
|
+
"name": "inverted"
|
|
132
157
|
}
|
|
133
158
|
],
|
|
134
159
|
"attributes": [
|
|
@@ -146,6 +171,15 @@
|
|
|
146
171
|
},
|
|
147
172
|
{
|
|
148
173
|
"name": "popover-height"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"name": "popover-max-height"
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "popover-max-width"
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"name": "inverted"
|
|
149
183
|
}
|
|
150
184
|
],
|
|
151
185
|
"superclass": {
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { WithExtraAttributes as e,
|
|
1
|
+
import { WithExtraAttributes as e, booleanPropertyToAttributeSetter as t, log as n, propertyToAttributeSetter as r, renderTemplate as i } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/dropdown.css?inline
|
|
3
|
-
var
|
|
3
|
+
var a = ":host{position:relative}::slotted([slot=popover]){border-radius:var(--px-radius-main,8px);background:var(--px-color-background-surface-light,#fff);margin:var(--px-spacing-xs-mobile) 0 0 0;width:auto;max-height:var(--px-popover-max-height);max-width:var(--px-popover-max-width);border:0;padding:0;position:fixed;right:0;box-shadow:0 20px 25px -5px #25252514}:host([grow]) ::slotted([slot=trigger]):after{padding-right:var(--px-padding-xs-mobile);right:0}:host([anchoralignment=top-left]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-mobile) 0;top:auto}:host([anchoralignment=top-right]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-mobile) 0;top:auto;left:auto}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){margin:var(--px-spacing-xs-mobile) 0 0 0;left:auto}@media screen and (width<=47.938rem){::slotted([slot=trigger]){width:100%;display:block}:host([anchoralignment=top-left]) ::slotted([slot=popover]){left:var(--px-padding-s-mobile)}:host([anchoralignment=top-right]) ::slotted([slot=popover]){left:var(--px-padding-s-mobile)}}@media screen and (width>=48rem){::slotted([slot=popover]){margin:var(--px-spacing-xs-tablet) 0 0 0;width:auto;padding:0;right:auto}:host([anchoralignment=top-left]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-tablet) 0}:host([anchoralignment=top-right]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-tablet) 0}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){margin:var(--px-spacing-xs-tablet) 0 0 0}}@media screen and (width>=64.0625rem){::slotted([slot=popover]){margin:var(--px-spacing-xs-desktop) 0 0 0;width:auto;padding:0;right:auto}}@media screen and (width>=90.0625rem){::slotted([slot=popover]){width:auto;padding:0;right:auto}:host([anchoralignment=bottom-right]) ::slotted([slot=popover]){margin:var(--px-spacing-xs-desktop) 0 0 0}:host([anchoralignment=top-left]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-desktop) 0}:host([anchoralignment=top-right]) ::slotted([slot=popover]){margin:0 0 var(--px-spacing-xs-desktop) 0}}:host([inverted]) ::slotted([slot=popover]){background:var(--px-color-background-surface-dark,#333)}", o = [
|
|
4
4
|
"top-left",
|
|
5
5
|
"top-right",
|
|
6
6
|
"bottom-left",
|
|
@@ -8,7 +8,7 @@ var i = ":host{position:relative}::slotted([slot=popover]){border-radius:var(--p
|
|
|
8
8
|
];
|
|
9
9
|
//#endregion
|
|
10
10
|
//#region src/anchorPolyfill.ts
|
|
11
|
-
function
|
|
11
|
+
function s(e, t, n = "bottom-left", r, i = !1) {
|
|
12
12
|
"anchorName" in document.documentElement.style && i === !1 || t.addEventListener("toggle", () => {
|
|
13
13
|
if (!e || !t) return;
|
|
14
14
|
let i = e.getBoundingClientRect(), a = window.visualViewport?.height ?? window.innerHeight, o = window.visualViewport?.width ?? window.innerWidth, s = r.getPropertyValue("--px-padding-s-mobile") || "16px", c = parseInt((r.getPropertyValue("--px-icon-size-xs-desktop") || "24").replace("px", ""));
|
|
@@ -18,9 +18,9 @@ function o(e, t, n = "bottom-left", r, i = !1) {
|
|
|
18
18
|
/* v8 ignore end */
|
|
19
19
|
//#endregion
|
|
20
20
|
//#region src/Dropdown.ts
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
var
|
|
21
|
+
var c = new CSSStyleSheet();
|
|
22
|
+
c.replaceSync(a);
|
|
23
|
+
var l = "bottom-left", u = class extends e {
|
|
24
24
|
get css() {
|
|
25
25
|
return `::slotted([slot='trigger']) {
|
|
26
26
|
anchor-name: ${this.anchorName};
|
|
@@ -36,20 +36,20 @@ var c = "bottom-left", l = class extends e {
|
|
|
36
36
|
::slotted([slot="popover"]) {
|
|
37
37
|
position-anchor: ${this.anchorName};
|
|
38
38
|
top: anchor(${this.anchorName} bottom);
|
|
39
|
-
right:
|
|
39
|
+
right: anchor(${this.anchorName} right);
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
:host([anchoralignment="top-left"]) {
|
|
43
43
|
::slotted([slot="popover"]) {
|
|
44
44
|
position-anchor: ${this.anchorName};
|
|
45
|
-
bottom:
|
|
45
|
+
bottom: anchor(${this.anchorName} top);
|
|
46
46
|
left: anchor(${this.anchorName} left);
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
:host([anchoralignment="top-right"]) {
|
|
50
50
|
::slotted([slot="popover"]) {
|
|
51
51
|
position-anchor: ${this.anchorName};
|
|
52
|
-
bottom:
|
|
52
|
+
bottom: anchor(${this.anchorName} top);
|
|
53
53
|
right: anchor(${this.anchorName} right);
|
|
54
54
|
}
|
|
55
55
|
}`;
|
|
@@ -61,11 +61,14 @@ var c = "bottom-left", l = class extends e {
|
|
|
61
61
|
"anchoralignment",
|
|
62
62
|
"use-polyfill",
|
|
63
63
|
"manual-toggle",
|
|
64
|
-
"popover-height"
|
|
64
|
+
"popover-height",
|
|
65
|
+
"popover-max-height",
|
|
66
|
+
"popover-max-width",
|
|
67
|
+
"inverted"
|
|
65
68
|
];
|
|
66
69
|
}
|
|
67
70
|
constructor() {
|
|
68
|
-
super(
|
|
71
|
+
super(c), this.template = () => `
|
|
69
72
|
<style>${this.css}</style>
|
|
70
73
|
<slot name="trigger"></slot>
|
|
71
74
|
<slot name="popover"></slot>`, this.isAboutToClose = !1, this.triggerPopoverDisplay = () => {
|
|
@@ -80,10 +83,10 @@ var c = "bottom-left", l = class extends e {
|
|
|
80
83
|
this.$popoverElement.matches(":popover-open") || setTimeout(() => {
|
|
81
84
|
this.isAboutToClose = !1;
|
|
82
85
|
});
|
|
83
|
-
},
|
|
86
|
+
}, i(this.shadowRoot, this.template());
|
|
84
87
|
}
|
|
85
88
|
connectedCallback() {
|
|
86
|
-
this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment",
|
|
89
|
+
this.getAttribute("id") || this.setAttribute("id", `px-dropdown-${Math.random().toString(36).substring(2, 15)}`), this.getAttribute("anchoralignment") || this.setAttribute("anchoralignment", l), s(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
|
|
87
90
|
}
|
|
88
91
|
#e() {
|
|
89
92
|
this.isAboutToClose = !1, this.manualToggle || this.$trigger.removeEventListener("click", this.triggerPopoverDisplay), this.$popoverElement.removeEventListener("beforetoggle", this.#t), this.$popoverElement.removeEventListener("toggle", this.#n);
|
|
@@ -99,20 +102,27 @@ var c = "bottom-left", l = class extends e {
|
|
|
99
102
|
this.initPopover();
|
|
100
103
|
break;
|
|
101
104
|
case "use-polyfill":
|
|
102
|
-
|
|
105
|
+
s(this.$trigger, this.$popoverElement, this.anchorAlignment, getComputedStyle(this), this.usePolyfill);
|
|
103
106
|
break;
|
|
104
107
|
case "manual-toggle":
|
|
105
108
|
n != null && this.$trigger?.removeAttribute("aria-expanded");
|
|
106
109
|
break;
|
|
107
110
|
case "popover-height":
|
|
108
|
-
|
|
111
|
+
case "popover-max-height":
|
|
112
|
+
this.updatePopoverMaxHeight(n);
|
|
113
|
+
break;
|
|
114
|
+
case "popover-max-width":
|
|
115
|
+
this.updatePopoverMaxWidth(n);
|
|
109
116
|
break;
|
|
110
117
|
default: super.attributeChangedCallback(e, t, n);
|
|
111
118
|
}
|
|
112
119
|
}
|
|
113
|
-
|
|
120
|
+
updatePopoverMaxHeight(e) {
|
|
114
121
|
e ? this.$popoverElement.style.setProperty("--px-popover-max-height", e) : this.$popoverElement.style.removeProperty("--px-popover-max-height");
|
|
115
122
|
}
|
|
123
|
+
updatePopoverMaxWidth(e) {
|
|
124
|
+
e ? this.$popoverElement.style.setProperty("--px-popover-max-width", e) : this.$popoverElement.style.removeProperty("--px-popover-max-width");
|
|
125
|
+
}
|
|
116
126
|
initPopover() {
|
|
117
127
|
if (this.$trigger) {
|
|
118
128
|
this.$trigger.setAttribute("popovertarget", this.popoverId);
|
|
@@ -136,10 +146,10 @@ var c = "bottom-left", l = class extends e {
|
|
|
136
146
|
return this.querySelector("[slot=\"popover\"]");
|
|
137
147
|
}
|
|
138
148
|
get anchorAlignment() {
|
|
139
|
-
return this.getAttribute("anchoralignment") ||
|
|
149
|
+
return this.getAttribute("anchoralignment") || l;
|
|
140
150
|
}
|
|
141
151
|
set anchorAlignment(e) {
|
|
142
|
-
|
|
152
|
+
o.includes(e) ? this.setAttribute("anchoralignment", e) : (n(`Invalid anchor alignment value: ${e}. Using default ${l}.`), this.setAttribute("anchoralignment", l));
|
|
143
153
|
}
|
|
144
154
|
get usePolyfill() {
|
|
145
155
|
return this.hasAttribute("use-polyfill");
|
|
@@ -157,9 +167,27 @@ var c = "bottom-left", l = class extends e {
|
|
|
157
167
|
return this.getAttribute("popover-height");
|
|
158
168
|
}
|
|
159
169
|
set popoverHeight(e) {
|
|
160
|
-
|
|
170
|
+
r(this, "popover-height", e);
|
|
171
|
+
}
|
|
172
|
+
get popoverMaxHeight() {
|
|
173
|
+
return this.getAttribute("popover-max-height");
|
|
174
|
+
}
|
|
175
|
+
set popoverMaxHeight(e) {
|
|
176
|
+
r(this, "popover-max-height", e);
|
|
177
|
+
}
|
|
178
|
+
get popoverMaxWidth() {
|
|
179
|
+
return this.getAttribute("popover-max-width");
|
|
180
|
+
}
|
|
181
|
+
set popoverMaxWidth(e) {
|
|
182
|
+
r(this, "popover-max-width", e);
|
|
183
|
+
}
|
|
184
|
+
get inverted() {
|
|
185
|
+
return this.hasAttribute("inverted");
|
|
186
|
+
}
|
|
187
|
+
set inverted(e) {
|
|
188
|
+
t(this, "inverted", e);
|
|
161
189
|
}
|
|
162
190
|
};
|
|
163
|
-
customElements.get("px-dropdown") || customElements.define("px-dropdown",
|
|
191
|
+
customElements.get("px-dropdown") || customElements.define("px-dropdown", u);
|
|
164
192
|
//#endregion
|
|
165
|
-
export {
|
|
193
|
+
export { u as Dropdown };
|
|
@@ -10,7 +10,10 @@
|
|
|
10
10
|
{ "name": "anchoralignment", "values": [] },
|
|
11
11
|
{ "name": "use-polyfill", "values": [] },
|
|
12
12
|
{ "name": "manual-toggle", "values": [] },
|
|
13
|
-
{ "name": "popover-height", "values": [] }
|
|
13
|
+
{ "name": "popover-height", "values": [] },
|
|
14
|
+
{ "name": "popover-max-height", "values": [] },
|
|
15
|
+
{ "name": "popover-max-width", "values": [] },
|
|
16
|
+
{ "name": "inverted", "values": [] }
|
|
14
17
|
],
|
|
15
18
|
"references": []
|
|
16
19
|
}
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-dropdown",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.209",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,7 +15,10 @@
|
|
|
15
15
|
{ "name": "anchoralignment", "value": { "type": "string" } },
|
|
16
16
|
{ "name": "use-polyfill", "value": { "type": "string" } },
|
|
17
17
|
{ "name": "manual-toggle", "value": { "type": "string" } },
|
|
18
|
-
{ "name": "popover-height", "value": { "type": "string" } }
|
|
18
|
+
{ "name": "popover-height", "value": { "type": "string" } },
|
|
19
|
+
{ "name": "popover-max-height", "value": { "type": "string" } },
|
|
20
|
+
{ "name": "popover-max-width", "value": { "type": "string" } },
|
|
21
|
+
{ "name": "inverted", "value": { "type": "string" } }
|
|
19
22
|
],
|
|
20
23
|
"events": [],
|
|
21
24
|
"js": {
|
|
@@ -28,7 +31,10 @@
|
|
|
28
31
|
{ "name": "anchorAlignment", "type": "AnchorAlignment" },
|
|
29
32
|
{ "name": "usePolyfill" },
|
|
30
33
|
{ "name": "manualToggle" },
|
|
31
|
-
{ "name": "popoverHeight" }
|
|
34
|
+
{ "name": "popoverHeight" },
|
|
35
|
+
{ "name": "popoverMaxHeight" },
|
|
36
|
+
{ "name": "popoverMaxWidth" },
|
|
37
|
+
{ "name": "inverted" }
|
|
32
38
|
],
|
|
33
39
|
"events": []
|
|
34
40
|
}
|