@dile/ui 2.23.3 → 2.23.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 (2) hide show
  1. package/components/toast/src/DileToastPersistent.js +76 -63
  2. package/package.json +2 -2
package/components/toast/src/DileToastPersistent.js CHANGED
@@ -1,118 +1,131 @@
1
1
  import { LitElement, html, css } from "lit";
2
- import { DileOverlay } from "../../../mixins/overlay/index.js"
3
2
 
4
- export class DileToastPersistent extends DileOverlay(LitElement) {
3
+ export class DileToastPersistent extends LitElement {
5
4
  static get styles() {
6
5
  return css`
7
6
  :host {
8
- display: inline;
9
- position: relative;
10
- box-sizing: border-box;
11
- }
12
- span {
7
+ display: block;
13
8
  position: fixed;
14
- bottom: 0px;
15
- left: 0px;
16
-
17
- width: 0;
18
- height: 0;
19
- }
20
- :host([opened]) section {
21
- transform: translateX(0);
9
+ bottom: var(--dile-toast-persistent-gap, 1rem);
10
+ left: var(--dile-toast-persistent-gap, 1rem);
11
+ z-index: var(--dile-toast-persistent-z-index, 999);
12
+ width: var(--dile-toast-persistent-width, 300px);
13
+ box-sizing: border-box;
14
+ pointer-events: none;
22
15
  }
23
- :host([right]) span {
24
- right: 0px;
16
+ :host([right]) {
25
17
  left: auto;
18
+ right: var(--dile-toast-persistent-gap, 1rem);
26
19
  }
27
- :host([center]:not([right])) span {
20
+ :host([center]:not([right])) {
28
21
  left: 50%;
29
- right: auto;
22
+ transform: translateX(-50%);
30
23
  }
31
- #overlay {
24
+ #toast {
25
+ pointer-events: all;
26
+ display: none;
27
+ opacity: 0;
28
+ transform: translateY(12px);
29
+ transition: opacity var(--dile-toast-persistent-transition, 0.5s ease),
30
+ transform var(--dile-toast-persistent-transition, 0.5s ease);
32
31
  box-sizing: border-box;
33
32
  color: var(--dile-toast-persistent-color, #fff);
34
- z-index: var(--dile-toast-persistent-z-index, 999);
35
33
  background-color: var(--dile-toast-persistent-background-color, #0e6ff5);
36
34
  border-radius: var(--dile-toast-persistent-border-radius, 0);
37
- width: var(--dile-toast-persistent-width, 300px);
38
35
  max-width: var(--dile-toast-persistent-max-width, 300px);
39
36
  box-shadow: var(--dile-toast-persistent-box-shadow, 0 0 2px rgba(200, 200, 200, 0.5));
40
37
  padding: var(--dile-toast-persistent-padding, 1px);
41
38
  overflow: var(--dile-toast-persistent-overflow, visible);
42
- display: none;
43
- position: absolute;
44
- opacity: 0;
45
- transition: var(--dile-toast-persistent-transition, ease 0.5s);
46
- transition-property: transform, opacity;
47
- transform: translateY(-10px);
48
39
  }
49
- #overlay.opened {
40
+ #toast.visible {
50
41
  opacity: 1;
51
42
  transform: translateY(0);
52
43
  }
53
- #trigger {
54
- display: flex;
55
- }
56
44
  `;
57
45
  }
58
46
 
59
47
  static get properties() {
60
48
  return {
49
+ opened: {
50
+ type: Boolean,
51
+ reflect: true,
52
+ },
61
53
  right: {
62
54
  type: Boolean,
63
- reflect: true
55
+ reflect: true,
64
56
  },
65
57
  center: {
66
58
  type: Boolean,
67
- reflect: true
59
+ reflect: true,
68
60
  },
69
61
  openOnInit: {
70
62
  type: Boolean,
71
- }
63
+ },
72
64
  };
73
65
  }
74
66
 
75
67
  constructor() {
76
68
  super();
77
- this.horizontalAlign = 'left';
78
- this.verticalAlign = 'top';
79
- this.moveLeft = -10;
80
- this.moveTop = -16;
69
+ this.opened = false;
70
+ this.right = false;
71
+ this.center = false;
72
+ this.openOnInit = false;
81
73
  }
82
74
 
83
75
  firstUpdated() {
84
- super.firstUpdated();
85
- if(this.openOnInit) {
86
- setTimeout( () => this.open(), 200);
76
+ this._toastEl = this.shadowRoot.getElementById('toast');
77
+ if (this.openOnInit) {
78
+ setTimeout(() => this.open(), 200);
87
79
  }
88
80
  }
89
-
81
+
90
82
  updated(changedProperties) {
91
- if(changedProperties.has('right') || changedProperties.has('center')) {
92
- if (this.right) {
93
- this.horizontalAlign = 'left';
94
- this.moveLeft = -10;
95
- } else if (this.center) {
96
- this.horizontalAlign = 'center';
97
- this.moveLeft = 0;
98
- } else {
99
- this.horizontalAlign = 'right';
100
- this.moveLeft = -10;
83
+ if (changedProperties.has('opened')) {
84
+ if (this.opened) {
85
+ this._show();
86
+ } else if (changedProperties.get('opened') !== undefined) {
87
+ this._hide();
101
88
  }
102
89
  }
103
90
  }
104
91
 
92
+ open() {
93
+ this.opened = true;
94
+ }
95
+
96
+ close() {
97
+ this.opened = false;
98
+ }
99
+
100
+ toggle() {
101
+ this.opened = !this.opened;
102
+ }
103
+
104
+ _show() {
105
+ this._toastEl.style.display = 'block';
106
+ requestAnimationFrame(() => {
107
+ requestAnimationFrame(() => {
108
+ this._toastEl.classList.add('visible');
109
+ this.dispatchEvent(new CustomEvent('overlay-opened', { bubbles: true, composed: true }));
110
+ });
111
+ });
112
+ }
113
+
114
+ _hide() {
115
+ this._toastEl.classList.remove('visible');
116
+ this.dispatchEvent(new CustomEvent('overlay-closed', { bubbles: true, composed: true }));
117
+ setTimeout(() => {
118
+ if (!this.opened) {
119
+ this._toastEl.style.display = 'none';
120
+ }
121
+ }, 500);
122
+ }
123
+
105
124
  render() {
106
125
  return html`
107
- <span id="trigger">
108
- <div
109
- id="overlay"
110
- class="${this._overlayClass}"
111
- >
112
- <slot></slot>
113
- </div>
114
- </span>
126
+ <div id="toast">
127
+ <slot></slot>
128
+ </div>
115
129
  `;
116
130
  }
117
-
118
- }
131
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dile/ui",
3
- "version": "2.23.3",
3
+ "version": "2.23.4",
4
4
  "description": "UI Core components from dile-components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -26,5 +26,5 @@
26
26
  "publishConfig": {
27
27
  "access": "public"
28
28
  },
29
- "gitHead": "9111912eb932969bafff5a25146ba62f57e4cf24"
29
+ "gitHead": "d4b96faa2eac1566baf56e09530fef92e2a3011c"
30
30
  }