@proximus/lavender-drawer 1.4.10-beta.2 → 1.4.10-beta.4

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.
Files changed (3) hide show
  1. package/dist/Drawer.d.ts +11 -0
  2. package/dist/index.es.js +76 -35
  3. package/package.json +1 -1
package/dist/Drawer.d.ts CHANGED
@@ -7,6 +7,7 @@ import { type Icon } from '@proximus/lavender-icon';
7
7
  export declare const HIDE_EVENT = "px.lavender.drawer.hide";
8
8
  export declare class Drawer extends HTMLElement {
9
9
  observer: MutationObserver;
10
+ private previousFocusedElement;
10
11
  template: string;
11
12
  constructor();
12
13
  connectedCallback(): void;
@@ -33,4 +34,14 @@ export declare class Drawer extends HTMLElement {
33
34
  set openedby(value: string);
34
35
  get closedby(): string;
35
36
  set closedby(value: string);
37
+ get fullscreen(): boolean;
38
+ set fullscreen(value: boolean);
39
+ get fullscreenMobile(): boolean;
40
+ set fullscreenMobile(value: boolean);
41
+ get fullscreenTablet(): boolean;
42
+ set fullscreenTablet(value: boolean);
43
+ get fullscreenLaptop(): boolean;
44
+ set fullscreenLaptop(value: boolean);
45
+ get fullscreenDesktop(): boolean;
46
+ set fullscreenDesktop(value: boolean);
36
47
  }
package/dist/index.es.js CHANGED
@@ -3,12 +3,12 @@ import "@proximus/lavender-layout";
3
3
  import "@proximus/lavender-button-icon";
4
4
  import "@proximus/lavender-icon";
5
5
  import "@proximus/lavender-heading";
6
- const l = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}@media screen and (min-width: 48rem){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media screen and (min-width: 64.0625rem){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog{width:75%;height:100%;margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{max-height:100%;height:100%;margin:0 auto 0 0}:host([showfrom="left"]) dialog{width:75%;height:100%;margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}}@media screen and (min-width: 90.0625rem){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}}@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}}', n = new CSSStyleSheet();
6
+ const l = ':host *{box-sizing:border-box}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}dialog{box-shadow:none;padding:0;margin:auto 0 0;border:0;width:100%;animation:dialog-fade-in-bottom .3s;border-radius:var(--px-radius-main) var(--px-radius-main) 0 0;background-color:var(--px-color-background-surface-light)}#container{display:grid;grid-template:"header close" auto "content content" 1fr "footer footer" auto / 1fr auto;column-gap:var(--px-spacing-l-mobile);padding:var(--px-padding-l-mobile);max-height:90dvh}#header{grid-area:header;margin-bottom:var(--px-spacing-l-mobile)}#close{grid-area:close}#content{grid-area:content;overflow:hidden;overflow-y:auto}#footer{grid-area:footer;margin-top:var(--px-spacing-l-mobile)}:host([fullscreen]) #container{height:90dvh}@media screen and (max-width: 47.938rem){:host([fullscreen--mobile]) #container{height:90dvh}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([fullscreen--tablet]) #container{height:90dvh}}@media screen and (min-width: 48rem){#container{column-gap:var(--px-spacing-l-tablet);padding:var(--px-padding-l-tablet)}#header{margin-bottom:var(--px-spacing-l-tablet)}#footer{margin-top:var(--px-spacing-l-tablet)}}@media screen and (min-width: 64.0625rem) and (max-width: 90rem){:host([fullscreen--laptop]:not([showfrom="left"]):not([showfrom="right"])) #container{height:90dvh}}@media screen and (min-width: 64.0625rem){#container{column-gap:var(--px-spacing-l-laptop);padding:var(--px-padding-l-laptop);max-width:var(--px-content-wrapper-max-width-laptop);margin:0 auto}#header{margin-bottom:var(--px-spacing-l-laptop)}#footer{margin-top:var(--px-spacing-l-laptop)}:host([showfrom="right"]) dialog,:host([showfrom="left"]) dialog{width:75%;height:100%}:host([showfrom="right"]) #container,:host([showfrom="left"]) #container{max-height:100%;height:100%}:host([showfrom="right"]) dialog{margin:0 0 0 auto;animation:dialog-fade-in-right .3s;border-radius:var(--px-radius-main) 0 0 var(--px-radius-main)}:host([showfrom="right"]) #container{margin:0 auto 0 0}:host([showfrom="left"]) dialog{margin:0 auto 0 0;animation:dialog-fade-in-left .3s;border-radius:0 var(--px-radius-main) var(--px-radius-main) 0}:host([showfrom="left"]) #container{margin:0 0 0 auto}:host([showfrom="right"][fullscreen]) #container,:host([showfrom="left"][fullscreen]) #container{height:100%}}@media screen and (min-width: 90.0625rem){#container{column-gap:var(--px-spacing-l-desktop);padding:var(--px-padding-l-desktop)}#header{margin-bottom:var(--px-spacing-l-desktop)}#footer{margin-top:var(--px-spacing-l-desktop)}:host([fullscreen--desktop]:not([showfrom="left"]):not([showfrom="right"])) #container{height:90dvh}}@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}}', n = new CSSStyleSheet();
7
7
  n.replaceSync(l);
8
8
  const d = "px.lavender.drawer.hide";
9
9
  class h extends HTMLElement {
10
10
  constructor() {
11
- super(), this.template = `<dialog popover role="dialog" aria-modal="true" >
11
+ super(), this.previousFocusedElement = null, this.template = `<dialog popover role="dialog" aria-modal="true" >
12
12
  <div id="container">
13
13
  <px-vstack gap="heading-to-subtitle" id="header">
14
14
  <px-h1 variant="title-2xl">
@@ -41,37 +41,47 @@ class h extends HTMLElement {
41
41
  </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [n];
42
42
  }
43
43
  connectedCallback() {
44
- var t;
44
+ var e;
45
45
  this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.$opener && this.addOpenListener(), this.$closer && this.addCloseListener(), this.hasAttribute("showfrom") || this.setAttribute("showfrom", "bottom"), this.$closeButton.addEventListener("click", () => {
46
46
  this.hide();
47
- }), this.$dialog.addEventListener("toggle", (e) => {
48
- e.newState === "closed" && this.hide();
49
- }), this.toggleFooterVisibility(), (t = this.$slotFooter) == null || t.addEventListener(
47
+ }), this.$dialog.addEventListener("toggle", (t) => {
48
+ t.newState === "closed" && this.hide();
49
+ }), this.toggleFooterVisibility(), (e = this.$slotFooter) == null || e.addEventListener(
50
50
  "slotchange",
51
51
  this.toggleFooterVisibility
52
52
  );
53
53
  }
54
54
  static get observedAttributes() {
55
- return ["open", "aria-label-close-button", "openedby", "closedby"];
56
- }
57
- attributeChangedCallback(t, e, o) {
58
- var a, i, s;
59
- switch (t) {
55
+ return [
56
+ "open",
57
+ "aria-label-close-button",
58
+ "openedby",
59
+ "closedby",
60
+ "fullscreen",
61
+ "fullscreen--mobile",
62
+ "fullscreen--tablet",
63
+ "fullscreen--laptop",
64
+ "fullscreen--desktop"
65
+ ];
66
+ }
67
+ attributeChangedCallback(e, t, o) {
68
+ var i, r, a;
69
+ switch (e) {
60
70
  case "open":
61
71
  o !== null ? this.show() : this.hide();
62
72
  break;
63
73
  case "aria-label-close-button":
64
- o ? (s = (i = this.$closeButton) == null ? void 0 : i.setAttribute) == null || s.call(
65
- i,
74
+ o ? (a = (r = this.$closeButton) == null ? void 0 : r.setAttribute) == null || a.call(
75
+ r,
66
76
  "aria-label",
67
77
  o || "Close drawer"
68
- ) : (a = this.$closeButton) == null || a.removeAttribute("aria-label");
78
+ ) : (i = this.$closeButton) == null || i.removeAttribute("aria-label");
69
79
  break;
70
80
  case "openedby":
71
- if (o !== e) {
72
- if (e) {
73
- const r = document.querySelector(`#${e}`);
74
- r == null || r.removeEventListener("click", () => this.show());
81
+ if (o !== t) {
82
+ if (t) {
83
+ const s = document.querySelector(`#${t}`);
84
+ s == null || s.removeEventListener("click", () => this.show());
75
85
  }
76
86
  this.addOpenListener();
77
87
  }
@@ -82,19 +92,20 @@ class h extends HTMLElement {
82
92
  }
83
93
  }
84
94
  disconnectedCallback() {
85
- var t, e;
86
- (t = this.$slotFooter) == null || t.removeEventListener(
95
+ var e, t;
96
+ (e = this.$slotFooter) == null || e.removeEventListener(
87
97
  "slotchange",
88
98
  this.toggleFooterVisibility
89
- ), (e = this.observer) == null || e.disconnect(), this.$opener && this.$opener.removeEventListener("click", () => this.show()), this.$closer && this.$closer.removeEventListener("click", () => this.hide());
99
+ ), (t = this.observer) == null || t.disconnect(), this.$opener && this.$opener.removeEventListener("click", () => this.show()), this.$closer && this.$closer.removeEventListener("click", () => this.hide());
90
100
  }
91
101
  show() {
92
- var t, e;
93
- (e = (t = this.$dialog).showPopover) == null || e.call(t), document.body.style.overflow = "hidden";
102
+ var t, o, i;
103
+ const e = document.activeElement;
104
+ this.previousFocusedElement = ((t = e == null ? void 0 : e.shadowRoot) == null ? void 0 : t.activeElement) ?? e, (i = (o = this.$dialog).showPopover) == null || i.call(o), document.body.style.overflow = "hidden";
94
105
  }
95
106
  hide() {
96
- var t, e;
97
- (e = (t = this.$dialog).hidePopover) == null || e.call(t), document.body.style.overflow = "", this.dispatchEvent(
107
+ var e, t, o;
108
+ (t = (e = this.$dialog).hidePopover) == null || t.call(e), document.body.style.overflow = "", (o = this.previousFocusedElement) == null || o.focus(), this.previousFocusedElement = null, this.dispatchEvent(
98
109
  new Event(d, {
99
110
  bubbles: !0,
100
111
  composed: !0
@@ -113,8 +124,8 @@ class h extends HTMLElement {
113
124
  }));
114
125
  }
115
126
  addCloseListener() {
116
- var t;
117
- this.$closer && ((t = this.$closer) == null || t.addEventListener("click", () => {
127
+ var e;
128
+ this.$closer && ((e = this.$closer) == null || e.addEventListener("click", () => {
118
129
  this.hide();
119
130
  }));
120
131
  }
@@ -148,26 +159,56 @@ class h extends HTMLElement {
148
159
  get $footer() {
149
160
  return this.shadowRoot.querySelector("#footer");
150
161
  }
151
- set open(t) {
152
- t ? this.setAttribute("open", "") : this.removeAttribute("open");
162
+ set open(e) {
163
+ e ? this.setAttribute("open", "") : this.removeAttribute("open");
153
164
  }
154
165
  get AriaLabelCloseButton() {
155
166
  return this.getAttribute("aria-label-close-button");
156
167
  }
157
- set AriaLabelCloseButton(t) {
158
- this.setAttribute("aria-label-close-button", t);
168
+ set AriaLabelCloseButton(e) {
169
+ this.setAttribute("aria-label-close-button", e);
159
170
  }
160
171
  get openedby() {
161
172
  return this.getAttribute("openedby");
162
173
  }
163
- set openedby(t) {
164
- this.setAttribute("openedby", t);
174
+ set openedby(e) {
175
+ this.setAttribute("openedby", e);
165
176
  }
166
177
  get closedby() {
167
178
  return this.getAttribute("closedby");
168
179
  }
169
- set closedby(t) {
170
- this.setAttribute("closedby", t);
180
+ set closedby(e) {
181
+ this.setAttribute("closedby", e);
182
+ }
183
+ get fullscreen() {
184
+ return this.hasAttribute("fullscreen");
185
+ }
186
+ set fullscreen(e) {
187
+ e ? this.setAttribute("fullscreen", "") : this.removeAttribute("fullscreen");
188
+ }
189
+ get fullscreenMobile() {
190
+ return this.hasAttribute("fullscreen--mobile");
191
+ }
192
+ set fullscreenMobile(e) {
193
+ e ? this.setAttribute("fullscreen--mobile", "") : this.removeAttribute("fullscreen--mobile");
194
+ }
195
+ get fullscreenTablet() {
196
+ return this.hasAttribute("fullscreen--tablet");
197
+ }
198
+ set fullscreenTablet(e) {
199
+ e ? this.setAttribute("fullscreen--tablet", "") : this.removeAttribute("fullscreen--tablet");
200
+ }
201
+ get fullscreenLaptop() {
202
+ return this.hasAttribute("fullscreen--laptop");
203
+ }
204
+ set fullscreenLaptop(e) {
205
+ e ? this.setAttribute("fullscreen--laptop", "") : this.removeAttribute("fullscreen--laptop");
206
+ }
207
+ get fullscreenDesktop() {
208
+ return this.hasAttribute("fullscreen--desktop");
209
+ }
210
+ set fullscreenDesktop(e) {
211
+ e ? this.setAttribute("fullscreen--desktop", "") : this.removeAttribute("fullscreen--desktop");
171
212
  }
172
213
  }
173
214
  customElements.get("px-drawer") || customElements.define("px-drawer", h);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-drawer",
3
- "version": "1.4.10-beta.2",
3
+ "version": "1.4.10-beta.4",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",