@cicciosgamino/snack-bar 1.0.0 → 1.3.0

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 (8) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/LICENSE +1 -1
  3. package/README.md +1 -0
  4. package/{dist/index.html → index.html} +29 -6
  5. package/package.json +4 -10
  6. package/snack-bar.js +217 -0
  7. package/vite.config.js +22 -0
  8. package/dist/snack-bar.es.js +0 -29
package/CHANGELOG.md ADDED
@@ -0,0 +1,23 @@
1
+ # Changelog
2
+ All notable changes to this project will be documented in this file.
3
+
4
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6
+
7
+ ## [Unreleased]
8
+
9
+ ## [1.3.0] - 06-06-2023
10
+
11
+ ### Changed
12
+ - Minor fix
13
+ - Click to close the component
14
+
15
+ ## [1.1.0] - 29-07-2021
16
+
17
+ ### Changed
18
+ - Change module part in package.json, link to source snack-bar.js
19
+
20
+ ## [1.0.0] - 07-07-2021
21
+
22
+ ### Added
23
+ - Init the Element [@cicciosgamino](https://github.com/CICCIOSGAMINO).
package/LICENSE CHANGED
@@ -652,7 +652,7 @@ Also add information on how to contact you by electronic and paper mail.
652
652
  If the program does terminal interaction, make it output a short
653
653
  notice like this when it starts in an interactive mode:
654
654
 
655
- web-socket Copyright (C) 2021 @cicciosgamino
655
+ snack-bar Copyright (C) 2023 @cicciosgamino
656
656
  This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657
657
  This is free software, and you are welcome to redistribute it
658
658
  under certain conditions; type `show c' for details.
package/README.md CHANGED
@@ -56,6 +56,7 @@ npm install --save @cicciosgamino/snack-bar
56
56
  | timing | Number | `3000` | Snackbar active timing
57
57
  | title | String | `🌰 ... SnackBar Title` | Snackbar title
58
58
  | active | Boolean | `` | Snackbar active attribute (present/NOT)
59
+ | closebtn| Boolean | `` | Show the close button when attribute is present
59
60
 
60
61
 
61
62
  ### Methods
package/{dist/index.html → index.html} RENAMED
@@ -16,7 +16,7 @@
16
16
  <meta name="author" content="@cicciosgamino">
17
17
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
18
 
19
- <title>🍣 Sushi</title>
19
+ <title>🍣 SnackBar</title>
20
20
 
21
21
  <style>
22
22
  :root {
@@ -47,10 +47,13 @@
47
47
  place-content: center;
48
48
  gap: 5rem;
49
49
  }
50
+
51
+ snack-bar {
52
+ /* --snack-bottom: 10rem; absolute position from bottom */
53
+ }
50
54
  </style>
51
55
 
52
- <script type="module" crossorigin src="/snack-bar.es.js"></script>
53
- </head>
56
+ </head>
54
57
 
55
58
  <body>
56
59
 
@@ -64,15 +67,35 @@
64
67
  </section>
65
68
  </main>
66
69
 
67
- <!-- Use the snackbar -->
68
- <snack-bar title="offline"></snack-bar>
70
+ <!-- (default)
71
+ <snack-bar></snack-bar> -->
72
+
73
+ <!-- (default) with close button -->
74
+ <snack-bar closebtn></snack-bar>
75
+
76
+ <!-- Use the snackbar custom timing / title with close button
77
+ <snack-bar timing="5000" title="@Cicciosgamino" closebtn></snack-bar> -->
69
78
 
70
79
  <noscript>
71
80
  Please enable JavaScript to view this website.
72
81
  </noscript>
73
82
 
74
83
  <!-- Import Js Module -->
75
-
84
+ <script type="module" src="./snack-bar.js"></script>
85
+
86
+ <script>
87
+ window.addEventListener('DOMContentLoaded', () => {
88
+ const snack = document.querySelector('snack-bar')
89
+ setTimeout(() => {
90
+ // active the snack
91
+ snack.setAttribute('active', '')
92
+ }, 1000)
93
+ setTimeout(() => {
94
+ // close the snack (before timing ended)
95
+ snack.closeSnackbar()
96
+ }, 28000)
97
+ })
98
+ </script>
76
99
 
77
100
  </body>
78
101
  </html>
package/package.json CHANGED
@@ -1,12 +1,9 @@
1
1
  {
2
2
  "name": "@cicciosgamino/snack-bar",
3
- "version": "1.0.0",
3
+ "version": "1.3.0",
4
4
  "description": "Simple snackbar Lit Element",
5
- "main": "dist/snack-bar.es.js",
6
- "exports": "./dist/snack-bar.es.js",
7
- "files": [
8
- "dist"
9
- ],
5
+ "main": "snack-bar.js",
6
+ "module": "snack-bar.js",
10
7
  "repository": {
11
8
  "type": "git",
12
9
  "url": "git+https://github.com/CICCIOSGAMINO/snack-bar.git"
@@ -33,9 +30,6 @@
33
30
  "lit": "*"
34
31
  },
35
32
  "devDependencies": {
36
- "vite": "^2.4.3"
37
- },
38
- "directories": {
39
- "example": "examples/index.html"
33
+ "vite": "^4.3.9"
40
34
  }
41
35
  }
package/snack-bar.js ADDED
@@ -0,0 +1,217 @@
1
+ import { LitElement, html, css } from 'lit'
2
+
3
+ class SnackBar extends LitElement {
4
+ static get styles () {
5
+ return css`
6
+ * {
7
+ /*
8
+ --snack-bk-color: #333;
9
+ --snack-txt-color: #f5f5f5;
10
+ --snack-font-size: 2.1rem;
11
+ --snack-bottom: 0;
12
+ --snack-radius: 1px; */
13
+
14
+ /* base rem unit (10px) */
15
+ font-size: 62.5%;
16
+
17
+ margin: 0;
18
+ padding: 0;
19
+ box-sizing: border-box;
20
+ }
21
+
22
+ :host {
23
+ display: none;
24
+ animation-name: fadeOut;
25
+ animation-duration: 0.5s;
26
+ animation-fill-mode: forwards;
27
+ }
28
+
29
+ :host-context([active]) {
30
+ /* Handle CSS when host active */
31
+ animation-name: fadeIn;
32
+ animation-duration: 0.5s;
33
+ animation-fill-mode: forwards;
34
+ }
35
+
36
+ #snackbar {
37
+ border-radius: var(--snack-radius, 1px);
38
+ min-width: 100%;
39
+ background-color: var(--snack-bk-color, #333);
40
+ color: var(--snack-txt-color, #f5f5f5);
41
+
42
+ text-align: center;
43
+
44
+ position: fixed;
45
+ left: 50%;
46
+ transform: translate(-50%, 0);
47
+ bottom: var(--snack-bottom, 0);
48
+ }
49
+
50
+ #container {
51
+ margin: calc(var(--snack-font-size, 2.1rem) * 1.1);
52
+ }
53
+
54
+ p {
55
+ font-size: var(--snack-font-size, 2.1rem);
56
+ font-weight: 400;
57
+ line-height: var(--snack-font-size, 2.1rem);
58
+ }
59
+
60
+ #snackBtn {
61
+ width: var(--snack-font-size, 2.1rem);
62
+ height: var(--snack-font-size, 2.1rem);
63
+
64
+ background: none;
65
+ border: none;
66
+ cursor: pointer;
67
+
68
+ position: absolute;
69
+ top: calc(var(--snack-font-size, 2.1rem) * 1.3);
70
+ right: 3rem;
71
+ }
72
+
73
+ button::after {
74
+ content: '';
75
+ position: absolute;
76
+ top: -50%;
77
+ left: -50%;
78
+ right: 0;
79
+ bottom: 0;
80
+ width: calc(var(--snack-font-size, 2.1rem) * 2);
81
+ height: calc(var(--snack-font-size, 2.1rem) * 2);
82
+ background: #555;
83
+ border-radius: 50%;
84
+ z-index: -1;
85
+ transform: scale(0);
86
+ transition: 0.3s cubic-bezier(.95, .32, .37, 1.21);
87
+ }
88
+
89
+ button:hover::after {
90
+ transform: scale(1);
91
+ }
92
+
93
+ button svg {
94
+ width: var(--snack-font-size, 2.1rem);
95
+ height: var(--snack-font-size, 2.1rem);
96
+ fill: var(--snack-txt-color, #f5f5f5);
97
+ }
98
+
99
+ button:hover svg {
100
+ transform: scale(0.95);
101
+ }
102
+
103
+ @media only screen and (min-width: 649px) {
104
+ #snackbar {
105
+ min-width: 50%;
106
+ }
107
+ }
108
+
109
+ /* Snackbar animation */
110
+ @keyframes fadeIn {
111
+ from { opacity: 0; }
112
+ to { opacity: 1; }
113
+ }
114
+ @keyframes fadeOut {
115
+ from { opacity: 1; }
116
+ to { opacity: 0; }
117
+ }
118
+ `
119
+ }
120
+
121
+ #timer
122
+ static get properties () {
123
+ return {
124
+ title: {
125
+ type: String,
126
+ reflect: true
127
+ },
128
+ active: Boolean,
129
+ timing: Number,
130
+ closebtn: {
131
+ type: Boolean,
132
+ reflect: true
133
+ }
134
+ }
135
+ }
136
+
137
+ constructor () {
138
+ super()
139
+ this.title = '🌰 ... SnackBar Title' || ''
140
+ this.timing = 5000
141
+ }
142
+
143
+ connectedCallback () {
144
+ super.connectedCallback()
145
+ this.addEventListener('click', this.#deactivate)
146
+
147
+ console.log('@CLOSE-BTN >> ', this.closebtn)
148
+ }
149
+
150
+ disconnectedCallback () {
151
+ clearInterval(this.#timer)
152
+ super.disconnectedCallback()
153
+ }
154
+
155
+ updated (changed) {
156
+ if (changed.has('active')) {
157
+ if (this.hasAttribute('active')) {
158
+ this.#activate()
159
+ }
160
+ }
161
+ super.updated()
162
+ }
163
+
164
+ #activate () {
165
+ this.style.display = 'block'
166
+ clearInterval(this.#timer)
167
+ this.#timer = setTimeout(() => {
168
+ this.#deactivate()
169
+ }, this.timing)
170
+ }
171
+
172
+ #deactivate () {
173
+ this.removeAttribute('active')
174
+ // listen for the fadeOut animation to end > display none
175
+ this.addEventListener('animationend', (event) => {
176
+ if (event.animationName === 'fadeOut') {
177
+ this.style.display = 'none'
178
+ }
179
+ })
180
+ }
181
+
182
+ // method close the snackbar
183
+ closeSnackbar () {
184
+ this.#deactivate()
185
+ }
186
+
187
+ render () {
188
+ return html`
189
+ <!-- The snackbar -->
190
+ <div id="snackbar">
191
+
192
+ <div id="container">
193
+
194
+ <p>
195
+ ${this.title}
196
+ </p>
197
+
198
+ ${this.closebtn ?
199
+ html`
200
+ <!-- deprecated -->
201
+ <button
202
+ id="snackBtn"
203
+ @click=${this.closeSnackbar}>
204
+ <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
205
+ <path d="M0 0h24v24H0V0z" fill="none"/>
206
+ <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
207
+ </svg>
208
+ </button>` : null
209
+ }
210
+
211
+ </div>
212
+ </div>
213
+ `
214
+ }
215
+ }
216
+
217
+ customElements.define('snack-bar', SnackBar)
package/vite.config.js ADDED
@@ -0,0 +1,22 @@
1
+ import { defineConfig } from 'vite'
2
+ import { resolve } from 'path'
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ build: {
7
+ lib: {
8
+ entry: 'src/app-lite.js',
9
+ formats: ['es']
10
+ },
11
+ rollupOptions: {
12
+ input: {
13
+ main: resolve(__dirname, 'index.html')
14
+ }
15
+ }
16
+ },
17
+ esbuild: {
18
+ supported: {
19
+ 'top-level-await': true // top-level-await feature
20
+ }
21
+ }
22
+ })
package/dist/snack-bar.es.js DELETED
@@ -1,29 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright 2019 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- const t=window.ShadowRoot&&(void 0===window.ShadyCSS||window.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,e=Symbol();class s{constructor(t,s){if(s!==e)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t}get styleSheet(){return t&&void 0===this.t&&(this.t=new CSSStyleSheet,this.t.replaceSync(this.cssText)),this.t}toString(){return this.cssText}}const i=new Map,n=t=>{let n=i.get(t);return void 0===n&&i.set(t,n=new s(t,e)),n},o=(t,...e)=>{const i=1===t.length?t[0]:e.reduce(((e,i,n)=>e+(t=>{if(t instanceof s)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[n+1]),t[0]);return n(i)},r=t?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return(t=>n("string"==typeof t?t:t+""))(e)})(t):t
7
- /**
8
- * @license
9
- * Copyright 2017 Google LLC
10
- * SPDX-License-Identifier: BSD-3-Clause
11
- */;var l,h,a,d;const c={toAttribute(t,e){switch(e){case Boolean:t=t?"":null;break;case Object:case Array:t=null==t?t:JSON.stringify(t)}return t},fromAttribute(t,e){let s=t;switch(e){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t)}catch(i){s=null}}return s}},u=(t,e)=>e!==t&&(e==e||t==t),p={attribute:!0,type:String,converter:c,reflect:!1,hasChanged:u};class v extends HTMLElement{constructor(){super(),this.Πi=new Map,this.Πo=void 0,this.Πl=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.Πh=null,this.u()}static addInitializer(t){var e;null!==(e=this.v)&&void 0!==e||(this.v=[]),this.v.push(t)}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((e,s)=>{const i=this.Πp(s,e);void 0!==i&&(this.Πm.set(i,s),t.push(i))})),t}static createProperty(t,e=p){if(e.state&&(e.attribute=!1),this.finalize(),this.elementProperties.set(t,e),!e.noAccessor&&!this.prototype.hasOwnProperty(t)){const s="symbol"==typeof t?Symbol():"__"+t,i=this.getPropertyDescriptor(t,s,e);void 0!==i&&Object.defineProperty(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){return{get(){return this[e]},set(i){const n=this[t];this[e]=i,this.requestUpdate(t,n,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||p}static finalize(){if(this.hasOwnProperty("finalized"))return!1;this.finalized=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),this.elementProperties=new Map(t.elementProperties),this.Πm=new Map,this.hasOwnProperty("properties")){const t=this.properties,e=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of e)this.createProperty(s,t[s])}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)e.unshift(r(t))}else void 0!==t&&e.push(r(t));return e}static"Πp"(t,e){const s=e.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof t?t.toLowerCase():void 0}u(){var t;this.Πg=new Promise((t=>this.enableUpdating=t)),this.L=new Map,this.Π_(),this.requestUpdate(),null===(t=this.constructor.v)||void 0===t||t.forEach((t=>t(this)))}addController(t){var e,s;(null!==(e=this.ΠU)&&void 0!==e?e:this.ΠU=[]).push(t),void 0!==this.renderRoot&&this.isConnected&&(null===(s=t.hostConnected)||void 0===s||s.call(t))}removeController(t){var e;null===(e=this.ΠU)||void 0===e||e.splice(this.ΠU.indexOf(t)>>>0,1)}"Π_"(){this.constructor.elementProperties.forEach(((t,e)=>{this.hasOwnProperty(e)&&(this.Πi.set(e,this[e]),delete this[e])}))}createRenderRoot(){var e;const s=null!==(e=this.shadowRoot)&&void 0!==e?e:this.attachShadow(this.constructor.shadowRootOptions);return((e,s)=>{t?e.adoptedStyleSheets=s.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet)):s.forEach((t=>{const s=document.createElement("style");s.textContent=t.cssText,e.appendChild(s)}))})(s,this.constructor.elementStyles),s}connectedCallback(){var t;void 0===this.renderRoot&&(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostConnected)||void 0===e?void 0:e.call(t)})),this.Πl&&(this.Πl(),this.Πo=this.Πl=void 0)}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostDisconnected)||void 0===e?void 0:e.call(t)})),this.Πo=new Promise((t=>this.Πl=t))}attributeChangedCallback(t,e,s){this.K(t,s)}"Πj"(t,e,s=p){var i,n;const o=this.constructor.Πp(t,s);if(void 0!==o&&!0===s.reflect){const r=(null!==(n=null===(i=s.converter)||void 0===i?void 0:i.toAttribute)&&void 0!==n?n:c.toAttribute)(e,s.type);this.Πh=t,null==r?this.removeAttribute(o):this.setAttribute(o,r),this.Πh=null}}K(t,e){var s,i,n;const o=this.constructor,r=o.Πm.get(t);if(void 0!==r&&this.Πh!==r){const t=o.getPropertyOptions(r),l=t.converter,h=null!==(n=null!==(i=null===(s=l)||void 0===s?void 0:s.fromAttribute)&&void 0!==i?i:"function"==typeof l?l:null)&&void 0!==n?n:c.fromAttribute;this.Πh=r,this[r]=h(e,t.type),this.Πh=null}}requestUpdate(t,e,s){let i=!0;void 0!==t&&(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||u)(this[t],e)?(this.L.has(t)||this.L.set(t,e),!0===s.reflect&&this.Πh!==t&&(void 0===this.Πk&&(this.Πk=new Map),this.Πk.set(t,s))):i=!1),!this.isUpdatePending&&i&&(this.Πg=this.Πq())}async"Πq"(){this.isUpdatePending=!0;try{for(await this.Πg;this.Πo;)await this.Πo}catch(e){Promise.reject(e)}const t=this.performUpdate();return null!=t&&await t,!this.isUpdatePending}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this.Πi&&(this.Πi.forEach(((t,e)=>this[e]=t)),this.Πi=void 0);let e=!1;const s=this.L;try{e=this.shouldUpdate(s),e?(this.willUpdate(s),null===(t=this.ΠU)||void 0===t||t.forEach((t=>{var e;return null===(e=t.hostUpdate)||void 0===e?void 0:e.call(t)})),this.update(s)):this.Π$()}catch(i){throw e=!1,this.Π$(),i}e&&this.E(s)}willUpdate(t){}E(t){var e;null===(e=this.ΠU)||void 0===e||e.forEach((t=>{var e;return null===(e=t.hostUpdated)||void 0===e?void 0:e.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}"Π$"(){this.L=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.Πg}shouldUpdate(t){return!0}update(t){void 0!==this.Πk&&(this.Πk.forEach(((t,e)=>this.Πj(e,this[e],t))),this.Πk=void 0),this.Π$()}updated(t){}firstUpdated(t){}}
12
- /**
13
- * @license
14
- * Copyright 2017 Google LLC
15
- * SPDX-License-Identifier: BSD-3-Clause
16
- */
17
- var f,m,g,y;v.finalized=!0,v.elementProperties=new Map,v.elementStyles=[],v.shadowRootOptions={mode:"open"},null===(h=(l=globalThis).reactiveElementPlatformSupport)||void 0===h||h.call(l,{ReactiveElement:v}),(null!==(a=(d=globalThis).reactiveElementVersions)&&void 0!==a?a:d.reactiveElementVersions=[]).push("1.0.0-rc.2");const b=globalThis.trustedTypes,S=b?b.createPolicy("lit-html",{createHTML:t=>t}):void 0,w=`lit$${(Math.random()+"").slice(9)}$`,C="?"+w,x=`<${C}>`,P=document,U=(t="")=>P.createComment(t),$=t=>null===t||"object"!=typeof t&&"function"!=typeof t,E=Array.isArray,A=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,H=/-->/g,T=/>/g,k=/>|[ \n \r](?:([^\s"'>=/]+)([ \n \r]*=[ \n \r]*(?:[^ \n \r"'`<>=]|("|')|))|$)/g,N=/'/g,O=/"/g,R=/^(?:script|style|textarea)$/i,M=(I=1,(t,...e)=>({_$litType$:I,strings:t,values:e})),B=Symbol.for("lit-noChange"),L=Symbol.for("lit-nothing"),_=new WeakMap,z=P.createTreeWalker(P,129,null,!1);var I,j,D,V,W,q,J;class K{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,o=0;const r=t.length-1,l=this.parts,[h,a]=((t,e)=>{const s=t.length-1,i=[];let n,o=2===e?"<svg>":"",r=A;for(let h=0;h<s;h++){const e=t[h];let s,l,a=-1,d=0;for(;d<e.length&&(r.lastIndex=d,l=r.exec(e),null!==l);)d=r.lastIndex,r===A?"!--"===l[1]?r=H:void 0!==l[1]?r=T:void 0!==l[2]?(R.test(l[2])&&(n=RegExp("</"+l[2],"g")),r=k):void 0!==l[3]&&(r=k):r===k?">"===l[0]?(r=null!=n?n:A,a=-1):void 0===l[1]?a=-2:(a=r.lastIndex-l[2].length,s=l[1],r=void 0===l[3]?k:'"'===l[3]?O:N):r===O||r===N?r=k:r===H||r===T?r=A:(r=k,n=void 0);const c=r===k&&t[h+1].startsWith("/>")?" ":"";o+=r===A?e+x:a>=0?(i.push(s),e.slice(0,a)+"$lit$"+e.slice(a)+w+c):e+w+(-2===a?(i.push(void 0),h):c)}const l=o+(t[s]||"<?>")+(2===e?"</svg>":"");return[void 0!==S?S.createHTML(l):l,i]})(t,e);if(this.el=K.createElement(h,s),z.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(i=z.nextNode())&&l.length<r;){if(1===i.nodeType){if(i.hasAttributes()){const t=[];for(const e of i.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(w)){const s=a[o++];if(t.push(e),void 0!==s){const t=i.getAttribute(s.toLowerCase()+"$lit$").split(w),e=/([.?@])?(.*)/.exec(s);l.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?X:"?"===e[1]?Y:"@"===e[1]?tt:Q})}else l.push({type:6,index:n})}for(const e of t)i.removeAttribute(e)}if(R.test(i.tagName)){const t=i.textContent.split(w),e=t.length-1;if(e>0){i.textContent=b?b.emptyScript:"";for(let s=0;s<e;s++)i.append(t[s],U()),z.nextNode(),l.push({type:2,index:++n});i.append(t[e],U())}}}else if(8===i.nodeType)if(i.data===C)l.push({type:2,index:n});else{let t=-1;for(;-1!==(t=i.data.indexOf(w,t+1));)l.push({type:7,index:n}),t+=w.length-1}n++}}static createElement(t,e){const s=P.createElement("template");return s.innerHTML=t,s}}function Z(t,e,s=t,i){var n,o,r,l;if(e===B)return e;let h=void 0!==i?null===(n=s.Σi)||void 0===n?void 0:n[i]:s.Σo;const a=$(e)?void 0:e._$litDirective$;return(null==h?void 0:h.constructor)!==a&&(null===(o=null==h?void 0:h.O)||void 0===o||o.call(h,!1),void 0===a?h=void 0:(h=new a(t),h.T(t,s,i)),void 0!==i?(null!==(r=(l=s).Σi)&&void 0!==r?r:l.Σi=[])[i]=h:s.Σo=h),void 0!==h&&(e=Z(t,h.S(t,e.values),h,i)),e}class F{constructor(t,e){this.l=[],this.N=void 0,this.D=t,this.M=e}u(t){var e;const{el:{content:s},parts:i}=this.D,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:P).importNode(s,!0);z.currentNode=n;let o=z.nextNode(),r=0,l=0,h=i[0];for(;void 0!==h;){if(r===h.index){let e;2===h.type?e=new G(o,o.nextSibling,this,t):1===h.type?e=new h.ctor(o,h.name,h.strings,this,t):6===h.type&&(e=new et(o,this,t)),this.l.push(e),h=i[++l]}r!==(null==h?void 0:h.index)&&(o=z.nextNode(),r++)}return n}v(t){let e=0;for(const s of this.l)void 0!==s&&(void 0!==s.strings?(s.I(t,s,e),e+=s.strings.length-2):s.I(t[e])),e++}}class G{constructor(t,e,s,i){this.type=2,this.N=void 0,this.A=t,this.B=e,this.M=s,this.options=i}setConnected(t){var e;null===(e=this.P)||void 0===e||e.call(this,t)}get parentNode(){return this.A.parentNode}get startNode(){return this.A}get endNode(){return this.B}I(t,e=this){t=Z(this,t,e),$(t)?t===L||null==t||""===t?(this.H!==L&&this.R(),this.H=L):t!==this.H&&t!==B&&this.m(t):void 0!==t._$litType$?this._(t):void 0!==t.nodeType?this.$(t):(t=>{var e;return E(t)||"function"==typeof(null===(e=t)||void 0===e?void 0:e[Symbol.iterator])})(t)?this.g(t):this.m(t)}k(t,e=this.B){return this.A.parentNode.insertBefore(t,e)}$(t){this.H!==t&&(this.R(),this.H=this.k(t))}m(t){const e=this.A.nextSibling;null!==e&&3===e.nodeType&&(null===this.B?null===e.nextSibling:e===this.B.previousSibling)?e.data=t:this.$(P.createTextNode(t)),this.H=t}_(t){var e;const{values:s,_$litType$:i}=t,n="number"==typeof i?this.C(t):(void 0===i.el&&(i.el=K.createElement(i.h,this.options)),i);if((null===(e=this.H)||void 0===e?void 0:e.D)===n)this.H.v(s);else{const t=new F(n,this),e=t.u(this.options);t.v(s),this.$(e),this.H=t}}C(t){let e=_.get(t.strings);return void 0===e&&_.set(t.strings,e=new K(t)),e}g(t){E(this.H)||(this.H=[],this.R());const e=this.H;let s,i=0;for(const n of t)i===e.length?e.push(s=new G(this.k(U()),this.k(U()),this,this.options)):s=e[i],s.I(n),i++;i<e.length&&(this.R(s&&s.B.nextSibling,i),e.length=i)}R(t=this.A.nextSibling,e){var s;for(null===(s=this.P)||void 0===s||s.call(this,!1,!0,e);t&&t!==this.B;){const e=t.nextSibling;t.remove(),t=e}}}class Q{constructor(t,e,s,i,n){this.type=1,this.H=L,this.N=void 0,this.V=void 0,this.element=t,this.name=e,this.M=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this.H=Array(s.length-1).fill(L),this.strings=s):this.H=L}get tagName(){return this.element.tagName}I(t,e=this,s,i){const n=this.strings;let o=!1;if(void 0===n)t=Z(this,t,e,0),o=!$(t)||t!==this.H&&t!==B,o&&(this.H=t);else{const i=t;let r,l;for(t=n[0],r=0;r<n.length-1;r++)l=Z(this,i[s+r],e,r),l===B&&(l=this.H[r]),o||(o=!$(l)||l!==this.H[r]),l===L?t=L:t!==L&&(t+=(null!=l?l:"")+n[r+1]),this.H[r]=l}o&&!i&&this.W(t)}W(t){t===L?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class X extends Q{constructor(){super(...arguments),this.type=3}W(t){this.element[this.name]=t===L?void 0:t}}class Y extends Q{constructor(){super(...arguments),this.type=4}W(t){t&&t!==L?this.element.setAttribute(this.name,""):this.element.removeAttribute(this.name)}}class tt extends Q{constructor(){super(...arguments),this.type=5}I(t,e=this){var s;if((t=null!==(s=Z(this,t,e,0))&&void 0!==s?s:L)===B)return;const i=this.H,n=t===L&&i!==L||t.capture!==i.capture||t.once!==i.once||t.passive!==i.passive,o=t!==L&&(i===L||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,t),this.H=t}handleEvent(t){var e,s;"function"==typeof this.H?this.H.call(null!==(s=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==s?s:this.element,t):this.H.handleEvent(t)}}class et{constructor(t,e,s){this.element=t,this.type=6,this.N=void 0,this.V=void 0,this.M=e,this.options=s}I(t){Z(this,t)}}null===(m=(f=globalThis).litHtmlPlatformSupport)||void 0===m||m.call(f,K,G),(null!==(g=(y=globalThis).litHtmlVersions)&&void 0!==g?g:y.litHtmlVersions=[]).push("2.0.0-rc.3"),(null!==(j=(J=globalThis).litElementVersions)&&void 0!==j?j:J.litElementVersions=[]).push("3.0.0-rc.2");class st extends v{constructor(){super(...arguments),this.renderOptions={host:this},this.Φt=void 0}createRenderRoot(){var t,e;const s=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=s.firstChild),s}update(t){const e=this.render();super.update(t),this.Φt=((t,e,s)=>{var i,n;const o=null!==(i=null==s?void 0:s.renderBefore)&&void 0!==i?i:e;let r=o._$litPart$;if(void 0===r){const t=null!==(n=null==s?void 0:s.renderBefore)&&void 0!==n?n:null;o._$litPart$=r=new G(e.insertBefore(U(),t),t,void 0,s)}return r.I(t),r})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.Φt)||void 0===t||t.setConnected(!1)}render(){return B}}st.finalized=!0,st._$litElement$=!0,null===(V=(D=globalThis).litElementHydrateSupport)||void 0===V||V.call(D,{LitElement:st}),null===(q=(W=globalThis).litElementPlatformSupport)||void 0===q||q.call(W,{LitElement:st});customElements.define("snack-bar",class extends st{static get styles(){return o`
18
- :host {
19
- display: block;
20
- }
21
- `}static get properties(){return{title:{type:String,reflect:!0}}}constructor(){super(),this.title="🌰 SnackBar Title"}connectedCallback(){super.connectedCallback()}updated(t){t.has("url")||t.has("protocols")}render(){return M`
22
- <!-- The snackbar -->
23
- <div id="snackbar">
24
- ${this.title}
25
- </div>
26
- <button>
27
- Dismiss
28
- </button>
29
- `}});