@proximus/lavender-drawer 1.0.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +550 -0
- package/package.json +42 -0
package/dist/index.js
ADDED
|
@@ -0,0 +1,550 @@
|
|
|
1
|
+
import "@proximus/lavender-separator";
|
|
2
|
+
import "@proximus/lavender-layout";
|
|
3
|
+
import { PxElement as w, WithExtraAttributes as L, textalignValues as T, colorValues as q, headingValues as I } from "@proximus/lavender-common";
|
|
4
|
+
const M = ".btn-icon{display:inline-flex;width:var(--px-action-size-l);height:var(--px-action-size-l);vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-background-color-action-primary-default);color:var(--px-icon-color-action-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-default);color:var(--px-icon-color-action-brand-default);border-color:var(--px-border-color-action-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-active-inverted);color:var(--px-icon-color-action-active-default);border-color:var(--px-border-color-action-active-default)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-default);color:var(--px-icon-color-action-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-action-size-m);height:var(--px-action-size-m)}.btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-default);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon{background:var(--px-background-color-action-primary-inverted);color:var(--px-icon-color-action-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-bordered-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-background-color-action-hover-default);color:var(--px-icon-color-action-active-inverted);border-color:var(--px-border-color-action-active-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-icon-color-action-brand-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-background-color-action-secondary-inverted);color:var(--px-icon-color-action-brand-inverted)}@media only screen and (min-width: 768px){.btn-icon{padding:var(--px-padding-xs-tablet)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn-icon--size-small{padding:var(--px-padding-2xs-tablet)}}@media only screen and (min-width: 1025px){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", A = new CSSStyleSheet();
|
|
5
|
+
A.replaceSync(M);
|
|
6
|
+
const N = ["", "default", "small"], R = ["", "default", "secondary"], g = class g extends w {
|
|
7
|
+
constructor() {
|
|
8
|
+
super(A), this.template = () => "<slot></slot>";
|
|
9
|
+
const t = document.createElement(this.nativeName);
|
|
10
|
+
t.classList.add("btn-icon"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
11
|
+
}
|
|
12
|
+
static get observedAttributes() {
|
|
13
|
+
return [
|
|
14
|
+
...super.observedAttributes,
|
|
15
|
+
"inverted",
|
|
16
|
+
"loading",
|
|
17
|
+
"size",
|
|
18
|
+
"variant"
|
|
19
|
+
];
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
super.connectedCallback();
|
|
23
|
+
const t = this.querySelector("px-icon");
|
|
24
|
+
if (t) {
|
|
25
|
+
const e = t.getAttribute("size"), i = t.getAttribute("color");
|
|
26
|
+
t.addEventListener("click", () => {
|
|
27
|
+
this.$el.focus();
|
|
28
|
+
}), e || t.setAttribute("size", "s"), this.size === "small" && t.setAttribute("size", "2xs"), i || t.setAttribute("color", "inherit");
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
attributeChangedCallback(t, e, i) {
|
|
32
|
+
if (e !== i)
|
|
33
|
+
switch (t) {
|
|
34
|
+
case "loading":
|
|
35
|
+
this.updateLoading();
|
|
36
|
+
break;
|
|
37
|
+
case "size":
|
|
38
|
+
this.updateSize(e, i, N);
|
|
39
|
+
break;
|
|
40
|
+
case "variant":
|
|
41
|
+
this.updateVariant(e, i, R);
|
|
42
|
+
break;
|
|
43
|
+
default:
|
|
44
|
+
super.attributeChangedCallback(t, e, i);
|
|
45
|
+
break;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
checkName(t, e) {
|
|
49
|
+
return t.includes(e);
|
|
50
|
+
}
|
|
51
|
+
_toggleClass(t, e) {
|
|
52
|
+
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(t), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(e);
|
|
53
|
+
}
|
|
54
|
+
updateLoading() {
|
|
55
|
+
this.$el.classList.toggle("btn-icon--state-loading");
|
|
56
|
+
}
|
|
57
|
+
updateSize(t, e, i) {
|
|
58
|
+
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`)) : console.error("Bad size value for", this.$el);
|
|
59
|
+
}
|
|
60
|
+
updateVariant(t, e, i) {
|
|
61
|
+
this.checkName(i, e) ? (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`)) : console.error(`Bad "variant" value for ${this.$el}`);
|
|
62
|
+
}
|
|
63
|
+
get inverted() {
|
|
64
|
+
return this.getAttribute("inverted");
|
|
65
|
+
}
|
|
66
|
+
set inverted(t) {
|
|
67
|
+
this.setAttribute("inverted", t);
|
|
68
|
+
}
|
|
69
|
+
get loading() {
|
|
70
|
+
return this.getAttribute("loading");
|
|
71
|
+
}
|
|
72
|
+
set loading(t) {
|
|
73
|
+
this.setAttribute("loading", t);
|
|
74
|
+
}
|
|
75
|
+
get size() {
|
|
76
|
+
return this.getAttribute("size");
|
|
77
|
+
}
|
|
78
|
+
set size(t) {
|
|
79
|
+
this.setAttribute("size", t);
|
|
80
|
+
}
|
|
81
|
+
get variant() {
|
|
82
|
+
return this.getAttribute("variant");
|
|
83
|
+
}
|
|
84
|
+
set variant(t) {
|
|
85
|
+
this.setAttribute("variant", t);
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
g.nativeName = "button";
|
|
89
|
+
let d = g;
|
|
90
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", d);
|
|
91
|
+
const P = ":host{line-height:1;display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-icon-color-content-brand-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-icon-color-content-brand-default)}.inherit{color:inherit}.content-brand{color:var(--px-icon-color-content-brand-default)}.content-neutral-strong{color:var(--px-icon-color-content-neutral-strong-default)}.content-neutral-weak{color:var(--px-icon-color-content-neutral-weak-default)}.action-brand{color:var(--px-icon-color-action-brand-default)}.action-neutral{color:var(--px-icon-color-action-neutral-default)}.action-hover:hover{color:var(--px-icon-color-action-hover-default)}.action-active:active{color:var(--px-icon-color-action-active-default)}.action-disabled{color:var(--px-icon-color-action-disabled-default)}.purpose-success{color:var(--px-icon-color-purpose-success-default)}.purpose-warning{color:var(--px-icon-color-purpose-warning-default)}.purpose-error{color:var(--px-icon-color-purpose-error-default)}.purpose-unlimited{color:var(--px-icon-color-purpose-unlimited-default)}.purpose-promo{color:var(--px-icon-color-purpose-promo-default)}:host([inverted]) i{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) svg{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .inherit{color:inherit}:host([inverted]) .content-brand{color:var(--px-icon-color-content-brand-inverted)}:host([inverted]) .content-neutral-strong{color:var(--px-icon-color-content-neutral-strong-inverted)}:host([inverted]) .content-neutral-weak{color:var(--px-icon-color-content-neutral-weak-inverted)}:host([inverted]) .action-brand{color:var(--px-icon-color-action-brand-inverted)}:host([inverted]) .action-neutral{color:var(--px-icon-color-action-neutral-inverted)}:host([inverted]) .action-hover:hover{color:var(--px-icon-color-action-hover-inverted)}:host([inverted]) .action-active:active{color:var(--px-icon-color-action-active-inverted)}:host([inverted]) .action-disabled{color:var(--px-icon-color-action-disabled-inverted)}:host([inverted]) .purpose-success{color:var(--px-icon-color-purpose-success-inverted)}:host([inverted]) .purpose-warning{color:var(--px-icon-color-purpose-warning-inverted)}:host([inverted]) .purpose-error{color:var(--px-icon-color-purpose-error-inverted)}:host([inverted]) .purpose-unlimited{color:var(--px-icon-color-purpose-unlimited-inverted)}:host([inverted]) .purpose-promo{color:var(--px-icon-color-purpose-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}", B = ["2xs", "xs", "s", "m", "l", "xl", "2xl"], D = [
|
|
92
|
+
"",
|
|
93
|
+
"default",
|
|
94
|
+
"inherit",
|
|
95
|
+
"content-brand",
|
|
96
|
+
"content-neutral-strong",
|
|
97
|
+
"content-neutral-weak",
|
|
98
|
+
"action-brand",
|
|
99
|
+
"action-neutral",
|
|
100
|
+
"action-hover",
|
|
101
|
+
"action-active",
|
|
102
|
+
"action-disabled",
|
|
103
|
+
"purpose-success",
|
|
104
|
+
"purpose-warning",
|
|
105
|
+
"purpose-error",
|
|
106
|
+
"purpose-unlimited",
|
|
107
|
+
"purpose-promo"
|
|
108
|
+
], j = [
|
|
109
|
+
"name",
|
|
110
|
+
"size",
|
|
111
|
+
"color",
|
|
112
|
+
"aria-label",
|
|
113
|
+
"inverted",
|
|
114
|
+
"from",
|
|
115
|
+
"disabled"
|
|
116
|
+
];
|
|
117
|
+
class G extends L {
|
|
118
|
+
static get observedAttributes() {
|
|
119
|
+
return [...super.observedAttributes, ...j];
|
|
120
|
+
}
|
|
121
|
+
constructor(...t) {
|
|
122
|
+
var e;
|
|
123
|
+
super(...t), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
|
|
124
|
+
}
|
|
125
|
+
attributeChangedCallback(t, e, i) {
|
|
126
|
+
if (e !== i)
|
|
127
|
+
switch (t) {
|
|
128
|
+
case "name":
|
|
129
|
+
this.updateName(e, i);
|
|
130
|
+
break;
|
|
131
|
+
case "size":
|
|
132
|
+
this.updateAttribute(t, e, i, B);
|
|
133
|
+
break;
|
|
134
|
+
case "color":
|
|
135
|
+
this.updateAttribute(t, e, i, D);
|
|
136
|
+
break;
|
|
137
|
+
case "disabled":
|
|
138
|
+
this.color = "action-disabled";
|
|
139
|
+
break;
|
|
140
|
+
case "aria-label":
|
|
141
|
+
if (!this.internals)
|
|
142
|
+
return;
|
|
143
|
+
i ? this.internals.ariaHidden = "false" : this.internals.ariaHidden = "true";
|
|
144
|
+
break;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
updateAttribute(t, e, i, r) {
|
|
148
|
+
e !== null && e !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${e}`) : this.$el.classList.toggle(e)), i !== null && i !== "" && (t === "size" ? this.$el.classList.toggle(`${t}-${i}`) : this.$el.classList.toggle(i)), this.checkName(r, i) || console.error(
|
|
149
|
+
`${i} is not an allowed ${t} value for ${this.$el}`
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
checkName(t, e) {
|
|
153
|
+
return t.includes(e);
|
|
154
|
+
}
|
|
155
|
+
get name() {
|
|
156
|
+
return this.getAttribute("name");
|
|
157
|
+
}
|
|
158
|
+
set name(t) {
|
|
159
|
+
this.setAttribute("name", t);
|
|
160
|
+
}
|
|
161
|
+
get size() {
|
|
162
|
+
return this.getAttribute("size");
|
|
163
|
+
}
|
|
164
|
+
set size(t) {
|
|
165
|
+
this.setAttribute("size", t);
|
|
166
|
+
}
|
|
167
|
+
get color() {
|
|
168
|
+
return this.getAttribute("color");
|
|
169
|
+
}
|
|
170
|
+
set color(t) {
|
|
171
|
+
this.setAttribute("color", t);
|
|
172
|
+
}
|
|
173
|
+
get arialabel() {
|
|
174
|
+
return this.getAttribute("aria-label");
|
|
175
|
+
}
|
|
176
|
+
set arialabel(t) {
|
|
177
|
+
this.setAttribute("aria-label", t);
|
|
178
|
+
}
|
|
179
|
+
get inverted() {
|
|
180
|
+
return this.getAttribute("inverted");
|
|
181
|
+
}
|
|
182
|
+
set inverted(t) {
|
|
183
|
+
this.setAttribute("inverted", t);
|
|
184
|
+
}
|
|
185
|
+
get from() {
|
|
186
|
+
return this.getAttribute("from");
|
|
187
|
+
}
|
|
188
|
+
set from(t) {
|
|
189
|
+
this.setAttribute("from", t);
|
|
190
|
+
}
|
|
191
|
+
get disabled() {
|
|
192
|
+
return this.getAttribute("disabled");
|
|
193
|
+
}
|
|
194
|
+
set disabled(t) {
|
|
195
|
+
this.setAttribute("disabled", t);
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
const $ = new CSSStyleSheet();
|
|
199
|
+
$.replaceSync(P);
|
|
200
|
+
class O extends G {
|
|
201
|
+
constructor() {
|
|
202
|
+
super($), this.template = () => `<svg>
|
|
203
|
+
<use xlink:href="#icon-${this.name}"></use>
|
|
204
|
+
</svg>`, this.shadowRoot.innerHTML = this.template();
|
|
205
|
+
}
|
|
206
|
+
connectedCallback() {
|
|
207
|
+
const t = document.querySelectorAll("px-icon-set");
|
|
208
|
+
t || console.log("<px-icon-set> component not found");
|
|
209
|
+
for (const e of t) {
|
|
210
|
+
if (!e.getAttribute("name") || !e.getAttribute("src")) {
|
|
211
|
+
console.error("Icon name or src not found");
|
|
212
|
+
continue;
|
|
213
|
+
}
|
|
214
|
+
e.getAttribute("name") === this.from && e.getAttribute("type") !== "font" && (this.src = e.getAttribute("src"), this.$el.firstElementChild.setAttribute(
|
|
215
|
+
"xlink:href",
|
|
216
|
+
`${this.src}#icon-${this.name}`
|
|
217
|
+
));
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
updateName(t, e) {
|
|
221
|
+
this.src && this.$el.firstElementChild.setAttribute(
|
|
222
|
+
"xlink:href",
|
|
223
|
+
`${this.src}#icon-${e}`
|
|
224
|
+
);
|
|
225
|
+
}
|
|
226
|
+
get $el() {
|
|
227
|
+
return this.shadowRoot.querySelector("svg");
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
customElements.get("px-icon") || customElements.define("px-icon", O);
|
|
231
|
+
class W extends HTMLElement {
|
|
232
|
+
constructor() {
|
|
233
|
+
super();
|
|
234
|
+
}
|
|
235
|
+
static get observedAttributes() {
|
|
236
|
+
return ["name", "src", "type", "format"];
|
|
237
|
+
}
|
|
238
|
+
connectedCallback() {
|
|
239
|
+
if (document.querySelectorAll(
|
|
240
|
+
`px-icon-set[name="${this.getAttribute("name")}"]`
|
|
241
|
+
).length > 1 && (console.warn(
|
|
242
|
+
"Only one <px-icon-set> component is allowed, self removing"
|
|
243
|
+
), this.remove()), this.getAttribute("type") === "font") {
|
|
244
|
+
const e = document.createElement("style");
|
|
245
|
+
e.setAttribute("type", "text/css"), e.setAttribute("data-name", this.getAttribute("name")), e.textContent = `
|
|
246
|
+
@font-face {
|
|
247
|
+
font-family: 'lavender';
|
|
248
|
+
src:
|
|
249
|
+
url('${this.getAttribute("src")}') format(${this.getAttribute("format")}),
|
|
250
|
+
font-weight: normal;
|
|
251
|
+
font-style: normal;
|
|
252
|
+
font-display: block;
|
|
253
|
+
}
|
|
254
|
+
`, document.head.appendChild(e);
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
disconnectedCallback() {
|
|
258
|
+
const t = document.querySelector(
|
|
259
|
+
`style[data-name="${this.getAttribute("name")}"]`
|
|
260
|
+
);
|
|
261
|
+
t && t.remove();
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
customElements.get("px-icon-set") || customElements.define("px-icon-set", W);
|
|
265
|
+
const F = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var( --heading-color-default, var(--px-text-color-heading-brand-default) );text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-heading-s-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var( --heading-color-inverted, var(--px-text-color-heading-brand-inverted) )}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-mobile)}.style-subtitle{font-size:var(--px-text-size-heading-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-tablet)}.style-title-s{font-size:var(--px-text-size-heading-s-tablet)}.style-subtitle{font-size:var(--px-text-size-heading-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-heading-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-heading-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-heading-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-heading-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-heading-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-heading-m-desktop)}.style-title-s{font-size:var(--px-text-size-heading-s-desktop)}.style-subtitle{font-size:var(--px-text-size-heading-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}", J = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-action-brand{color:var(--px-text-color-action-brand-default)}.color-action-neutral{color:var(--px-text-color-action-neutral-default)}.color-action-hover{color:var(--px-text-color-action-hover-default)}.color-action-active{color:var(--px-text-color-action-active-default)}.color-action-disabled{color:var(--px-text-color-action-disabled-default)}.color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-default)}.color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-default)}.color-heading-brand{color:var(--px-text-color-heading-brand-default)}.color-heading-neutral{color:var(--px-text-color-heading-neutral-default)}.color-purpose-success{color:var(--px-text-color-purpose-success-default)}.color-purpose-warning{color:var(--px-text-color-purpose-warning-default)}.color-purpose-error{color:var(--px-text-color-purpose-error-default)}.color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-text-color-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-action-brand{color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-text-color-action-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-text-color-purpose-promo-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}}@media only screen and (min-width: 1025px){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", S = new CSSStyleSheet();
|
|
266
|
+
S.replaceSync(F);
|
|
267
|
+
const C = new CSSStyleSheet();
|
|
268
|
+
C.replaceSync(J);
|
|
269
|
+
class n extends w {
|
|
270
|
+
template() {
|
|
271
|
+
return "<slot></slot>";
|
|
272
|
+
}
|
|
273
|
+
constructor(t) {
|
|
274
|
+
super(S, C);
|
|
275
|
+
const e = document.createElement(t);
|
|
276
|
+
e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
|
|
277
|
+
}
|
|
278
|
+
static get observedAttributes() {
|
|
279
|
+
return [
|
|
280
|
+
...super.observedAttributes,
|
|
281
|
+
"variant",
|
|
282
|
+
"color",
|
|
283
|
+
"text-align",
|
|
284
|
+
"text-align--mobile",
|
|
285
|
+
"text-align--tablet",
|
|
286
|
+
"text-align--laptop",
|
|
287
|
+
"text-align--desktop",
|
|
288
|
+
"inverted"
|
|
289
|
+
];
|
|
290
|
+
}
|
|
291
|
+
attributeChangedCallback(t, e, i) {
|
|
292
|
+
if (e !== i)
|
|
293
|
+
switch (t) {
|
|
294
|
+
case "variant":
|
|
295
|
+
this.updateAttribute(t, e, i, I);
|
|
296
|
+
break;
|
|
297
|
+
case "color":
|
|
298
|
+
this.updateColor(e, i, q);
|
|
299
|
+
break;
|
|
300
|
+
case "text-align":
|
|
301
|
+
case "text-align--mobile":
|
|
302
|
+
case "text-align--tablet":
|
|
303
|
+
case "text-align--laptop":
|
|
304
|
+
case "text-align--desktop":
|
|
305
|
+
this.updateTextAlign(t, e, i, T);
|
|
306
|
+
break;
|
|
307
|
+
default:
|
|
308
|
+
super.attributeChangedCallback(t, e, i);
|
|
309
|
+
break;
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
toggleClass(t, e) {
|
|
313
|
+
t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`style-${t}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`style-${e}`);
|
|
314
|
+
}
|
|
315
|
+
checkName(t, e) {
|
|
316
|
+
return t.includes(e);
|
|
317
|
+
}
|
|
318
|
+
updateAttribute(t, e, i, r) {
|
|
319
|
+
this.checkName(r, i) ? this.toggleClass(e, i) : console.error(
|
|
320
|
+
`${i} is not an allowed "${t}" value for`,
|
|
321
|
+
this.$el
|
|
322
|
+
);
|
|
323
|
+
}
|
|
324
|
+
updateColor(t, e, i) {
|
|
325
|
+
if (!this.checkName(i, e)) {
|
|
326
|
+
console.error("Bad color value for", this.$el);
|
|
327
|
+
return;
|
|
328
|
+
}
|
|
329
|
+
const r = (o) => {
|
|
330
|
+
o !== null && o !== "" && o !== "default" && (this.$el.style.setProperty(
|
|
331
|
+
"--heading-color-default",
|
|
332
|
+
`var(--px-text-color-${o}-default)`
|
|
333
|
+
), this.$el.style.setProperty(
|
|
334
|
+
"--heading-color-inverted",
|
|
335
|
+
`var(--px-text-color-${o}-inverted)`
|
|
336
|
+
));
|
|
337
|
+
};
|
|
338
|
+
r(t), r(e);
|
|
339
|
+
}
|
|
340
|
+
updateTextAlign(t, e, i, r) {
|
|
341
|
+
if (!this.checkName(r, i)) {
|
|
342
|
+
console.error(`Bad ${t} value for`, this.$el);
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
345
|
+
const o = (s, l) => {
|
|
346
|
+
l !== null && l !== "" && l !== "default" && this.$el.style.setProperty(
|
|
347
|
+
`--heading-text-align--${s}`,
|
|
348
|
+
l
|
|
349
|
+
);
|
|
350
|
+
};
|
|
351
|
+
if (t === "text-align")
|
|
352
|
+
["mobile", "tablet", "laptop", "desktop"].forEach((s) => {
|
|
353
|
+
o(s, e), o(s, i);
|
|
354
|
+
});
|
|
355
|
+
else {
|
|
356
|
+
const s = t.split("--")[1];
|
|
357
|
+
o(s, e), o(s, i);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
get variant() {
|
|
361
|
+
return this.getAttribute("variant");
|
|
362
|
+
}
|
|
363
|
+
set variant(t) {
|
|
364
|
+
this.setAttribute("variant", t);
|
|
365
|
+
}
|
|
366
|
+
get color() {
|
|
367
|
+
return this.getAttribute("color");
|
|
368
|
+
}
|
|
369
|
+
set color(t) {
|
|
370
|
+
this.setAttribute("color", t);
|
|
371
|
+
}
|
|
372
|
+
get textAlign() {
|
|
373
|
+
return this.getAttribute("text-align");
|
|
374
|
+
}
|
|
375
|
+
set textAlign(t) {
|
|
376
|
+
this.setAttribute("text-align", t);
|
|
377
|
+
}
|
|
378
|
+
get textAlignMobile() {
|
|
379
|
+
return this.getAttribute("text-align--mobile");
|
|
380
|
+
}
|
|
381
|
+
set textAlignMobile(t) {
|
|
382
|
+
this.setAttribute("text-align--mobile", t);
|
|
383
|
+
}
|
|
384
|
+
get textAlignTablet() {
|
|
385
|
+
return this.getAttribute("text-align--tablet");
|
|
386
|
+
}
|
|
387
|
+
set textAlignTablet(t) {
|
|
388
|
+
this.setAttribute("text-align--tablet", t);
|
|
389
|
+
}
|
|
390
|
+
get textAlignLaptop() {
|
|
391
|
+
return this.getAttribute("text-align--laptop");
|
|
392
|
+
}
|
|
393
|
+
set textAlignLaptop(t) {
|
|
394
|
+
this.setAttribute("text-align--laptop", t);
|
|
395
|
+
}
|
|
396
|
+
get textAlignDesktop() {
|
|
397
|
+
return this.getAttribute("text-align--desktop");
|
|
398
|
+
}
|
|
399
|
+
set textAlignDesktop(t) {
|
|
400
|
+
this.setAttribute("text-align--desktop", t);
|
|
401
|
+
}
|
|
402
|
+
get inverted() {
|
|
403
|
+
return this.getAttribute("inverted");
|
|
404
|
+
}
|
|
405
|
+
set inverted(t) {
|
|
406
|
+
this.setAttribute("inverted", t);
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
const u = class u extends n {
|
|
410
|
+
constructor() {
|
|
411
|
+
super("h1");
|
|
412
|
+
}
|
|
413
|
+
};
|
|
414
|
+
u.nativeName = "h1";
|
|
415
|
+
let c = u;
|
|
416
|
+
customElements.define("px-h1", c);
|
|
417
|
+
const f = class f extends n {
|
|
418
|
+
constructor() {
|
|
419
|
+
super("h2");
|
|
420
|
+
}
|
|
421
|
+
};
|
|
422
|
+
f.nativeName = "h2";
|
|
423
|
+
let h = f;
|
|
424
|
+
customElements.define("px-h2", h);
|
|
425
|
+
const m = class m extends n {
|
|
426
|
+
constructor() {
|
|
427
|
+
super("h3");
|
|
428
|
+
}
|
|
429
|
+
};
|
|
430
|
+
m.nativeName = "h3";
|
|
431
|
+
let x = m;
|
|
432
|
+
customElements.define("px-h3", x);
|
|
433
|
+
const z = class z extends n {
|
|
434
|
+
constructor() {
|
|
435
|
+
super("h4");
|
|
436
|
+
}
|
|
437
|
+
};
|
|
438
|
+
z.nativeName = "h4";
|
|
439
|
+
let p = z;
|
|
440
|
+
customElements.define("px-h4", p);
|
|
441
|
+
const y = class y extends n {
|
|
442
|
+
constructor() {
|
|
443
|
+
super("h5");
|
|
444
|
+
}
|
|
445
|
+
};
|
|
446
|
+
y.nativeName = "h5";
|
|
447
|
+
let b = y;
|
|
448
|
+
customElements.define("px-h5", b);
|
|
449
|
+
const k = class k extends n {
|
|
450
|
+
constructor() {
|
|
451
|
+
super("h6");
|
|
452
|
+
}
|
|
453
|
+
};
|
|
454
|
+
k.nativeName = "h6";
|
|
455
|
+
let v = k;
|
|
456
|
+
customElements.define("px-h6", v);
|
|
457
|
+
const K = '#container{border:0;border-radius:var(--px-radius-main);background-color:var(--px-background-color-container-weak-default)}:host([showfrom="bottom"]) #container{height:auto;margin-bottom:0;width:100%}px-button-icon{position:absolute;top:var(--px-padding-l-desktop);right:var(--px-padding-l-desktop)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:90vh;overflow:auto;padding:var(--px-padding-m-laptop)}@media screen and (min-width: 1080px){#container{width:67.5rem;height:100%;padding:var(--px-padding-l-desktop)}:host([showfrom="right"]) px-button-icon{right:10.625rem}:host([showfrom="right"]) #container{padding-right:10.625rem;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="left"]) px-button-icon{right:var(--px-padding-l-desktop)}:host([showfrom="left"]) #container{padding-left:10.625rem;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="bottom"]) #container{box-sizing:border-box}:host([showfrom="left"])>dialog{margin-left:0;animation:dialog-fade-in-left .3s;height:100%}:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;width:100%;animation:dialog-fade-in-bottom .3s}:host([showfrom="right"])>dialog{margin-right:0;animation:dialog-fade-in-right .3s;height:100%}}@media screen and (max-width: 1081px){dialog{width:100%}:host([showfrom="left"])>dialog,:host([showfrom="right"])>dialog,:host([showfrom="bottom"])>dialog{margin-bottom:0;margin-inline:0;height:revert;border-radius:var(--px-radius-main);animation:dialog-fade-in-bottom .3s}#container{width:100%;box-sizing:border-box;padding:var(--px-padding-m-mobile)}px-button-icon{top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}#content{max-height:45px;padding:var(--px-padding-m-mobile)}}@keyframes dialog-fade-in-right{0%{margin-right:-1080px}to{margin-right:0}}@keyframes dialog-fade-in-left{0%{margin-left:-1080px}to{margin-left:0}}@keyframes dialog-fade-in-bottom{0%{margin-bottom:-200px}to{margin-bottom:0}}', E = new CSSStyleSheet();
|
|
458
|
+
E.replaceSync(K);
|
|
459
|
+
const Q = "px.lavender.drawer.hide";
|
|
460
|
+
class U extends HTMLElement {
|
|
461
|
+
constructor() {
|
|
462
|
+
super(), this.template = `<dialog popover>
|
|
463
|
+
<div id="container">
|
|
464
|
+
<px-vstack gap="after-element-default" >
|
|
465
|
+
<px-vstack gap="after-element-s">
|
|
466
|
+
<px-h1 variant="title-4xl" variant--mobile="title-2xl" >
|
|
467
|
+
<slot name="title"></slot>
|
|
468
|
+
</px-h1>
|
|
469
|
+
<px-h2 variant="subtitle" color="heading-neutral">
|
|
470
|
+
<slot name="subtitle"></slot>
|
|
471
|
+
</px-h2>
|
|
472
|
+
</px-vstack>
|
|
473
|
+
<div id="content">
|
|
474
|
+
<slot></slot>
|
|
475
|
+
</div>
|
|
476
|
+
<px-separator size="m"></px-separator>
|
|
477
|
+
<px-stack
|
|
478
|
+
gap--mobile="heading-to-content"
|
|
479
|
+
gap="after-element-default"
|
|
480
|
+
justify-content="flex-end"
|
|
481
|
+
direction="row"
|
|
482
|
+
direction--mobile="column"
|
|
483
|
+
>
|
|
484
|
+
<slot name="footer"></slot>
|
|
485
|
+
</px-stack>
|
|
486
|
+
</px-vstack>
|
|
487
|
+
<px-button-icon variant="secondary" size="small">
|
|
488
|
+
<px-icon name="cross" from="lavender"></px-icon>
|
|
489
|
+
</px-button-icon>
|
|
490
|
+
</div>
|
|
491
|
+
</dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [E], this.hasAttribute("showfrom") || this.setAttribute("showfrom", "bottom");
|
|
492
|
+
}
|
|
493
|
+
connectedCallback() {
|
|
494
|
+
if (this.hasAttribute("closedby")) {
|
|
495
|
+
const t = document.querySelector(
|
|
496
|
+
`#${this.getAttribute("closedby")}`
|
|
497
|
+
);
|
|
498
|
+
t == null || t.addEventListener("click", () => {
|
|
499
|
+
this.hide();
|
|
500
|
+
});
|
|
501
|
+
}
|
|
502
|
+
if (this.hasAttribute("openedby")) {
|
|
503
|
+
const t = document.querySelector(
|
|
504
|
+
`px-button#${this.getAttribute("openedby")}`
|
|
505
|
+
);
|
|
506
|
+
t == null || t.addEventListener("click", () => {
|
|
507
|
+
this.show();
|
|
508
|
+
});
|
|
509
|
+
}
|
|
510
|
+
this.$closeButton.addEventListener("click", () => {
|
|
511
|
+
this.hide();
|
|
512
|
+
});
|
|
513
|
+
}
|
|
514
|
+
static get observedAttributes() {
|
|
515
|
+
return ["open"];
|
|
516
|
+
}
|
|
517
|
+
attributeChangedCallback(t, e, i) {
|
|
518
|
+
t === "open" && (i !== null ? this.show() : this.hide());
|
|
519
|
+
}
|
|
520
|
+
show() {
|
|
521
|
+
var t, e;
|
|
522
|
+
(e = (t = this.$dialog).showPopover) == null || e.call(t);
|
|
523
|
+
}
|
|
524
|
+
hide() {
|
|
525
|
+
var t, e;
|
|
526
|
+
(e = (t = this.$dialog).hidePopover) == null || e.call(t), this.dispatchEvent(
|
|
527
|
+
new Event(Q, {
|
|
528
|
+
bubbles: !0,
|
|
529
|
+
composed: !0
|
|
530
|
+
})
|
|
531
|
+
);
|
|
532
|
+
}
|
|
533
|
+
get $closeButton() {
|
|
534
|
+
return this.shadowRoot.querySelector("px-button-icon");
|
|
535
|
+
}
|
|
536
|
+
get $dialog() {
|
|
537
|
+
return this.shadowRoot.querySelector("dialog");
|
|
538
|
+
}
|
|
539
|
+
get open() {
|
|
540
|
+
return this.hasAttribute("open");
|
|
541
|
+
}
|
|
542
|
+
set open(t) {
|
|
543
|
+
t ? this.setAttribute("open", "") : this.removeAttribute("open");
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
customElements.get("px-drawer") || customElements.define("px-drawer", U);
|
|
547
|
+
export {
|
|
548
|
+
U as Drawer,
|
|
549
|
+
Q as HIDE_EVENT
|
|
550
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@proximus/lavender-drawer",
|
|
3
|
+
"version": "1.0.0-alpha.1",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": {
|
|
8
|
+
"types": "./src/index.ts",
|
|
9
|
+
"development": "./src/index.ts",
|
|
10
|
+
"default": "./dist/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./src/*.css": {
|
|
13
|
+
"development": "src/*.css"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
20
|
+
"scripts": {
|
|
21
|
+
"build": "rm -rf dist;tsc; vite build",
|
|
22
|
+
"test": "vitest run --coverage"
|
|
23
|
+
},
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"access": "public"
|
|
26
|
+
},
|
|
27
|
+
"gitHead": "ca59b5b94b8b16751608760d6c6bd00579df978c",
|
|
28
|
+
"lerna": {
|
|
29
|
+
"command": {
|
|
30
|
+
"publish": {
|
|
31
|
+
"assets": [
|
|
32
|
+
"CHANGELOG.md",
|
|
33
|
+
"package.json",
|
|
34
|
+
"dist/*.js",
|
|
35
|
+
"dist/*.cjs",
|
|
36
|
+
"dist/css/**/*.css",
|
|
37
|
+
"dist/js/**/*.js"
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|