@nuralyui/toast 0.0.3 → 0.0.11

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 (25) hide show
  1. package/bundle.js +1330 -0
  2. package/index.d.ts +7 -0
  3. package/index.js +7 -0
  4. package/index.js.map +1 -1
  5. package/package.json +40 -5
  6. package/react.d.ts +5 -3
  7. package/react.js +12 -5
  8. package/react.js.map +1 -1
  9. package/toast.component.d.ts +152 -7
  10. package/toast.component.js +350 -62
  11. package/toast.component.js.map +1 -1
  12. package/toast.style.d.ts +13 -2
  13. package/toast.style.js +336 -69
  14. package/toast.style.js.map +1 -1
  15. package/toast.types.d.ts +124 -0
  16. package/toast.types.js +9 -0
  17. package/toast.types.js.map +1 -0
  18. package/demo/toast-demo.d.ts +0 -34
  19. package/demo/toast-demo.d.ts.map +0 -1
  20. package/demo/toast-demo.js +0 -353
  21. package/demo/toast-demo.js.map +0 -1
  22. package/index.d.ts.map +0 -1
  23. package/react.d.ts.map +0 -1
  24. package/toast.component.d.ts.map +0 -1
  25. package/toast.style.d.ts.map +0 -1
package/demo/toast-demo.js DELETED
@@ -1,353 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-explicit-any */
2
- /* eslint-disable @typescript-eslint/no-explicit-any */
3
- /**
4
- * @license
5
- * Copyright 2023 Google Laabidi Aymen
6
- * SPDX-License-Identifier: MIT
7
- */
8
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
9
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
10
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
11
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
12
- return c > 3 && r && Object.defineProperty(target, key, r), r;
13
- };
14
- import { LitElement, html } from 'lit';
15
- import { customElement, state } from 'lit/decorators.js';
16
- let ElMeenuElement = class ElMeenuElement extends LitElement {
17
- constructor() {
18
- super(...arguments);
19
- this._showOptions = false;
20
- this._message = "";
21
- this._color = "";
22
- this._backgroundColor = "";
23
- this._fontFamily = "";
24
- this._borderRadius = "";
25
- this._border = "";
26
- this._zIndex = "";
27
- this._fontSize = "";
28
- this._padding = "";
29
- this._bottom = "";
30
- }
31
- firstUpdated() {
32
- // Get lit-toast referece to save multiple DOM access
33
- this.toast = this.shadowRoot.querySelector('hy-toast');
34
- console.log(this.toast);
35
- // If 'path' or 'composedPath()' unavailable, don't show options
36
- this.addEventListener('click', (event) => {
37
- this._showOptions = event.path || event.composedPath();
38
- });
39
- this.click();
40
- }
41
- _callToast() {
42
- this.toast.show(this._message);
43
- }
44
- _updateMessage(event) {
45
- let path = event.path || event.composedPath();
46
- if (path) {
47
- this._message = path[0].value;
48
- }
49
- }
50
- _updatePadding(event) {
51
- let path = event.path || event.composedPath();
52
- if (path) {
53
- this._padding = path[0].value;
54
- this.toast.style.setProperty('--lt-padding', this._padding);
55
- }
56
- }
57
- _updateBottom(event) {
58
- let path = event.path || event.composedPath();
59
- if (path) {
60
- this._bottom = path[0].value;
61
- this.toast.style.setProperty('--lt-bottom', this._bottom);
62
- }
63
- }
64
- _updateZIndex(event) {
65
- let path = event.path || event.composedPath();
66
- if (path) {
67
- this._zIndex = path[0].value;
68
- this.toast.style.setProperty('--lt-z-index', this._zIndex);
69
- }
70
- }
71
- _updateFontSize(event) {
72
- let path = event.path || event.composedPath();
73
- if (path) {
74
- this._fontSize = path[0].value;
75
- this.toast.style.setProperty('--lt-font-size', this._fontSize);
76
- }
77
- }
78
- _updateBorderRadius(event) {
79
- let path = event.path || event.composedPath();
80
- if (path) {
81
- this._borderRadius = path[0].value;
82
- this.toast.style.setProperty('--lt-border-radius', this._borderRadius);
83
- }
84
- }
85
- _updateBorder(event) {
86
- let path = event.path || event.composedPath();
87
- if (path) {
88
- this._border = path[0].value;
89
- this.toast.style.setProperty('--lt-border', this._border);
90
- }
91
- }
92
- _updateColor(event) {
93
- let path = event.path || event.composedPath();
94
- if (path) {
95
- this._color = path[0].value;
96
- this.toast.style.setProperty('--lt-color', this._color);
97
- }
98
- }
99
- _updateBackgroundColor(event) {
100
- let path = event.path || event.composedPath();
101
- if (path) {
102
- this._backgroundColor = path[0].value;
103
- this.toast.style.setProperty('--lt-background-color', this._backgroundColor);
104
- }
105
- }
106
- _updateFontFamily(event) {
107
- let path = event.path || event.composedPath();
108
- if (path) {
109
- this._fontFamily = path[0].value;
110
- this.toast.style.setProperty('--lt-font-family', this._fontFamily);
111
- }
112
- }
113
- render() {
114
- return html `
115
- <hy-toast></hy-toast>
116
-
117
- <!-- Primary Container (to center everything) -->
118
- <div class="container">
119
- <!-- Title + GitHub link -->
120
- <header>
121
- <h1>lit-toast</h1>
122
- <a
123
- href="https://github.com/Victor-Bernabe/lit-toast"
124
- rel="noreferrer"
125
- id="link-github"
126
- aria-label="See on GitHub"
127
- title="See on GitHub"
128
- ></a>
129
- </header>
130
-
131
- <main>
132
- <!-- Call Toast Button -->
133
- <button id="call-toast" @click="${this._callToast}">
134
- Call Toast
135
- </button>
136
-
137
- ${this._showOptions
138
- ? html `
139
- <!-- Panels Section -->
140
- <div id="panels">
141
- <!-- Options Section -->
142
- <section>
143
- <h2>Options</h2>
144
- <div class="panel panel-options">
145
- <!-- Options from 1 to 5 -->
146
- <div class="panel-column">
147
- <div class="option">
148
- <span id="padding" class="option-title">padding</span>
149
- <input
150
- class="input-common"
151
- type="text"
152
- placeholder="16px"
153
- .value="${this._padding}"
154
- @input="${this._updatePadding}"
155
- aria-labelledby="padding"
156
- />
157
- </div>
158
- <div class="option">
159
- <span id="bottom" class="option-title">bottom</span>
160
- <input
161
- class="input-common"
162
- type="text"
163
- placeholder="40px"
164
- .value="${this._bottom}"
165
- @input="${this._updateBottom}"
166
- aria-labelledby="bottom"
167
- />
168
- </div>
169
- <div class="option">
170
- <span id="color" class="option-title">color</span>
171
- <input
172
- class="input-common"
173
- type="color"
174
- .value="${this._color}"
175
- @change="${this._updateColor}"
176
- aria-labelledby="color"
177
- title="${this._color}"
178
- />
179
- </div>
180
- <div class="option">
181
- <span id="z-index" class="option-title">z-index</span>
182
- <input
183
- class="input-common"
184
- type="text"
185
- placeholder="2"
186
- .value="${this._zIndex}"
187
- @input="${this._updateZIndex}"
188
- aria-labelledby="z-index"
189
- />
190
- </div>
191
- <div class="option">
192
- <span id="font-size" class="option-title"
193
- >font-size</span
194
- >
195
- <input
196
- class="input-common"
197
- type="text"
198
- placeholder="1em"
199
- .value="${this._fontSize}"
200
- @input="${this._updateFontSize}"
201
- aria-labelledby="font-size"
202
- />
203
- </div>
204
- </div>
205
-
206
- <!-- Options from 6 to 10 -->
207
- <div class="panel-column">
208
- <div class="option">
209
- <span id="font-family" class="option-title"
210
- >font-family</span
211
- >
212
- <select
213
- class="input-common"
214
- @change="${this._updateFontFamily}"
215
- aria-labelledby="font-family"
216
- >
217
- <option value="sans-serif">sans-serif</option>
218
- <option value="serif">serif</option>
219
- </select>
220
- </div>
221
- <div class="option">
222
- <span id="border-radius" class="option-title"
223
- >border-radius</span
224
- >
225
- <input
226
- class="input-common"
227
- type="text"
228
- placeholder="2px"
229
- .value="${this._borderRadius}"
230
- @input="${this._updateBorderRadius}"
231
- aria-labelledby="border-radius"
232
- />
233
- </div>
234
- <div class="option">
235
- <span id="background-color" class="option-title"
236
- >background-color</span
237
- >
238
- <input
239
- class="input-common"
240
- type="color"
241
- .value="${this._backgroundColor}"
242
- @change="${this._updateBackgroundColor}"
243
- aria-labelledby="background-color"
244
- title="${this._backgroundColor}"
245
- />
246
- </div>
247
- <div class="option">
248
- <span id="border" class="option-title">border</span>
249
- <input
250
- class="input-common input-long-text"
251
- type="text"
252
- placeholder="none"
253
- .value="${this._border}"
254
- @input="${this._updateBorder}"
255
- aria-labelledby="border"
256
- />
257
- </div>
258
- <div class="option">
259
- <span id="text" class="option-title">text</span>
260
- <input
261
- class="input-common input-long-text"
262
- type="text"
263
- placeholder="Message"
264
- .value="${this._message}"
265
- @input="${this._updateMessage}"
266
- aria-labelledby="text"
267
- />
268
- </div>
269
- </div>
270
- </div>
271
- </section>
272
-
273
- <!-- Code Section -->
274
- <section>
275
- <h2>Code</h2>
276
- <div class="panel panel-code">
277
- <span class="css-selector">#toast</span
278
- ><span class="bracket">{</span><br />
279
- <span class="css-property">--lt-background-color:</span>
280
- <span class="css-value">${this._backgroundColor};</span
281
- ><br />
282
- <span class="css-property">--lt-color:</span>
283
- <span class="css-value">${this._color};</span><br />
284
- <span class="css-property">--lt-padding:</span>
285
- <span class="css-value">${this._padding};</span><br />
286
- <span class="css-property">--lt-bottom:</span>
287
- <span class="css-value">${this._bottom};</span><br />
288
- <span class="css-property">--lt-font-size:</span>
289
- <span class="css-value">${this._fontSize};</span><br />
290
- <span class="css-property">--lt-font-family:</span>
291
- <span class="css-value">${this._fontFamily};</span><br />
292
- <span class="css-property">--lt-border-radius:</span>
293
- <span class="css-value">${this._borderRadius};</span
294
- ><br />
295
- <span class="css-property">--lt-border:</span>
296
- <span class="css-value">${this._border};</span><br />
297
- <span class="css-property">--lt-z-index:</span>
298
- <span class="css-value">${this._zIndex};</span><br />
299
- <span class="bracket">}</span>
300
- </div>
301
- </section>
302
- </div>
303
- `
304
- : html `
305
- <!-- path and composedPath() are not supported so... no options :( -->
306
- `}
307
- </main>
308
- </div>
309
-
310
- `;
311
- }
312
- };
313
- __decorate([
314
- state()
315
- ], ElMeenuElement.prototype, "toast", void 0);
316
- __decorate([
317
- state()
318
- ], ElMeenuElement.prototype, "_showOptions", void 0);
319
- __decorate([
320
- state()
321
- ], ElMeenuElement.prototype, "_message", void 0);
322
- __decorate([
323
- state()
324
- ], ElMeenuElement.prototype, "_color", void 0);
325
- __decorate([
326
- state()
327
- ], ElMeenuElement.prototype, "_backgroundColor", void 0);
328
- __decorate([
329
- state()
330
- ], ElMeenuElement.prototype, "_fontFamily", void 0);
331
- __decorate([
332
- state()
333
- ], ElMeenuElement.prototype, "_borderRadius", void 0);
334
- __decorate([
335
- state()
336
- ], ElMeenuElement.prototype, "_border", void 0);
337
- __decorate([
338
- state()
339
- ], ElMeenuElement.prototype, "_zIndex", void 0);
340
- __decorate([
341
- state()
342
- ], ElMeenuElement.prototype, "_fontSize", void 0);
343
- __decorate([
344
- state()
345
- ], ElMeenuElement.prototype, "_padding", void 0);
346
- __decorate([
347
- state()
348
- ], ElMeenuElement.prototype, "_bottom", void 0);
349
- ElMeenuElement = __decorate([
350
- customElement('hy-toast-demo')
351
- ], ElMeenuElement);
352
- export { ElMeenuElement };
353
- //# sourceMappingURL=toast-demo.js.map
package/demo/toast-demo.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toast-demo.js","sourceRoot":"","sources":["../../../../src/components/toast/demo/toast-demo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport {LitElement, html} from 'lit';\nimport {customElement, state} from 'lit/decorators.js';\n\n@customElement('hy-toast-demo')\nexport class ElMeenuElement extends LitElement {\n @state()\n toast : any ;\n\n @state()\n _showOptions = false;\n\n @state()\n _message = \"\";\n \n override firstUpdated() {\n // Get lit-toast referece to save multiple DOM access\n this.toast = this.shadowRoot!.querySelector('hy-toast');\n console.log(this.toast);\n // If 'path' or 'composedPath()' unavailable, don't show options\n this.addEventListener('click', (event:any) => {\n this._showOptions = event.path || event.composedPath();\n });\n\n this.click();\n }\n\n _callToast() {\n this.toast.show(this._message)\n }\n _updateMessage(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._message = path[0].value;\n }\n }\n\n _updatePadding(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._padding = path[0].value;\n this.toast.style.setProperty('--lt-padding', this._padding);\n }\n }\n\n _updateBottom(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._bottom = path[0].value;\n this.toast.style.setProperty('--lt-bottom', this._bottom);\n }\n }\n\n _updateZIndex(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._zIndex = path[0].value;\n this.toast.style.setProperty('--lt-z-index', this._zIndex);\n }\n }\n\n _updateFontSize(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._fontSize = path[0].value;\n this.toast.style.setProperty('--lt-font-size', this._fontSize);\n }\n }\n\n _updateBorderRadius(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._borderRadius = path[0].value;\n this.toast.style.setProperty('--lt-border-radius', this._borderRadius);\n }\n }\n\n _updateBorder(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._border = path[0].value;\n this.toast.style.setProperty('--lt-border', this._border);\n }\n }\n@state()\n _color = \"\";\n @state()\n _backgroundColor = \"\";\n @state()\n _fontFamily = \"\";\n @state()\n _borderRadius = \"\";\n @state()\n _border = \"\";\n @state()\n _zIndex = \"\";\n @state()\n _fontSize = \"\";\n @state()\n _padding = \"\";\n @state()\n _bottom = \"\";\n\n _updateColor(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._color = path[0].value;\n this.toast.style.setProperty('--lt-color', this._color);\n }\n }\n\n _updateBackgroundColor(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._backgroundColor = path[0].value;\n this.toast.style.setProperty(\n '--lt-background-color',\n this._backgroundColor\n );\n }\n }\n\n _updateFontFamily(event:any) {\n let path = event.path || event.composedPath();\n if (path) {\n this._fontFamily = path[0].value;\n this.toast.style.setProperty('--lt-font-family', this._fontFamily);\n }\n }\n\n protected override render() {\n return html`\n <hy-toast></hy-toast>\n\n <!-- Primary Container (to center everything) -->\n <div class=\"container\">\n <!-- Title + GitHub link -->\n <header>\n <h1>lit-toast</h1>\n <a\n href=\"https://github.com/Victor-Bernabe/lit-toast\"\n rel=\"noreferrer\"\n id=\"link-github\"\n aria-label=\"See on GitHub\"\n title=\"See on GitHub\"\n ></a>\n </header>\n\n <main>\n <!-- Call Toast Button -->\n <button id=\"call-toast\" @click=\"${this._callToast}\">\n Call Toast\n </button>\n\n ${this._showOptions\n ? html`\n <!-- Panels Section -->\n <div id=\"panels\">\n <!-- Options Section -->\n <section>\n <h2>Options</h2>\n <div class=\"panel panel-options\">\n <!-- Options from 1 to 5 -->\n <div class=\"panel-column\">\n <div class=\"option\">\n <span id=\"padding\" class=\"option-title\">padding</span>\n <input\n class=\"input-common\"\n type=\"text\"\n placeholder=\"16px\"\n .value=\"${this._padding}\"\n @input=\"${this._updatePadding}\"\n aria-labelledby=\"padding\"\n />\n </div>\n <div class=\"option\">\n <span id=\"bottom\" class=\"option-title\">bottom</span>\n <input\n class=\"input-common\"\n type=\"text\"\n placeholder=\"40px\"\n .value=\"${this._bottom}\"\n @input=\"${this._updateBottom}\"\n aria-labelledby=\"bottom\"\n />\n </div>\n <div class=\"option\">\n <span id=\"color\" class=\"option-title\">color</span>\n <input\n class=\"input-common\"\n type=\"color\"\n .value=\"${this._color}\"\n @change=\"${this._updateColor}\"\n aria-labelledby=\"color\"\n title=\"${this._color}\"\n />\n </div>\n <div class=\"option\">\n <span id=\"z-index\" class=\"option-title\">z-index</span>\n <input\n class=\"input-common\"\n type=\"text\"\n placeholder=\"2\"\n .value=\"${this._zIndex}\"\n @input=\"${this._updateZIndex}\"\n aria-labelledby=\"z-index\"\n />\n </div>\n <div class=\"option\">\n <span id=\"font-size\" class=\"option-title\"\n >font-size</span\n >\n <input\n class=\"input-common\"\n type=\"text\"\n placeholder=\"1em\"\n .value=\"${this._fontSize}\"\n @input=\"${this._updateFontSize}\"\n aria-labelledby=\"font-size\"\n />\n </div>\n </div>\n\n <!-- Options from 6 to 10 -->\n <div class=\"panel-column\">\n <div class=\"option\">\n <span id=\"font-family\" class=\"option-title\"\n >font-family</span\n >\n <select\n class=\"input-common\"\n @change=\"${this._updateFontFamily}\"\n aria-labelledby=\"font-family\"\n >\n <option value=\"sans-serif\">sans-serif</option>\n <option value=\"serif\">serif</option>\n </select>\n </div>\n <div class=\"option\">\n <span id=\"border-radius\" class=\"option-title\"\n >border-radius</span\n >\n <input\n class=\"input-common\"\n type=\"text\"\n placeholder=\"2px\"\n .value=\"${this._borderRadius}\"\n @input=\"${this._updateBorderRadius}\"\n aria-labelledby=\"border-radius\"\n />\n </div>\n <div class=\"option\">\n <span id=\"background-color\" class=\"option-title\"\n >background-color</span\n >\n <input\n class=\"input-common\"\n type=\"color\"\n .value=\"${this._backgroundColor}\"\n @change=\"${this._updateBackgroundColor}\"\n aria-labelledby=\"background-color\"\n title=\"${this._backgroundColor}\"\n />\n </div>\n <div class=\"option\">\n <span id=\"border\" class=\"option-title\">border</span>\n <input\n class=\"input-common input-long-text\"\n type=\"text\"\n placeholder=\"none\"\n .value=\"${this._border}\"\n @input=\"${this._updateBorder}\"\n aria-labelledby=\"border\"\n />\n </div>\n <div class=\"option\">\n <span id=\"text\" class=\"option-title\">text</span>\n <input\n class=\"input-common input-long-text\"\n type=\"text\"\n placeholder=\"Message\"\n .value=\"${this._message}\"\n @input=\"${this._updateMessage}\"\n aria-labelledby=\"text\"\n />\n </div>\n </div>\n </div>\n </section>\n\n <!-- Code Section -->\n <section>\n <h2>Code</h2>\n <div class=\"panel panel-code\">\n <span class=\"css-selector\">#toast</span\n ><span class=\"bracket\">{</span><br />\n <span class=\"css-property\">--lt-background-color:</span>\n <span class=\"css-value\">${this._backgroundColor};</span\n ><br />\n <span class=\"css-property\">--lt-color:</span>\n <span class=\"css-value\">${this._color};</span><br />\n <span class=\"css-property\">--lt-padding:</span>\n <span class=\"css-value\">${this._padding};</span><br />\n <span class=\"css-property\">--lt-bottom:</span>\n <span class=\"css-value\">${this._bottom};</span><br />\n <span class=\"css-property\">--lt-font-size:</span>\n <span class=\"css-value\">${this._fontSize};</span><br />\n <span class=\"css-property\">--lt-font-family:</span>\n <span class=\"css-value\">${this._fontFamily};</span><br />\n <span class=\"css-property\">--lt-border-radius:</span>\n <span class=\"css-value\">${this._borderRadius};</span\n ><br />\n <span class=\"css-property\">--lt-border:</span>\n <span class=\"css-value\">${this._border};</span><br />\n <span class=\"css-property\">--lt-z-index:</span>\n <span class=\"css-value\">${this._zIndex};</span><br />\n <span class=\"bracket\">}</span>\n </div>\n </section>\n </div>\n `\n : html`\n <!-- path and composedPath() are not supported so... no options :( -->\n `}\n </main>\n </div>\n\n `;\n }\n}\n\n\n"]}
package/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
package/react.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/toast/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,eAAO,MAAM,OAAO;;EAOlB,CAAC"}
package/toast.component.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toast.component.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsC,MAAM,aAAa,CAAC;AAE7E,qBACa,QAAS,SAAQ,UAAU;IACrC,OAAgB,MAAM,kCAmCrB;IAEyB,MAAM,EAAG,GAAG,EAAE,CAAK;IAErC,MAAM;IAaf,IAAI,CAAC,IAAI,SAAK,EAAE,QAAQ,SAAO;IAe/B,kBAAkB,CAAC,KAAK,EAAE,GAAG;CAM9B"}
package/toast.style.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toast.style.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.style.ts"],"names":[],"mappings":";AAEA,wBAoEE"}