${messageBody}
- ` +${message}
+ ` + if (pinned) { + notification.classList.add('pinned') + composition += ` + + ` + } notification.innerHTML = composition + return notification + } + + push(message, options = {}) { + const notification = this.createNotification(message, options) this.notificationPanel.append(notification) notification.animate([ { @@ -179,7 +193,7 @@ customElements.define('sm-notifications', class extends HTMLElement { ], this.animationOptions) } - removeNotification(notification){ + removeNotification(notification) { notification.animate([ { transform: `none`, @@ -194,7 +208,7 @@ customElements.define('sm-notifications', class extends HTMLElement { } } - clearAll(){ + clearAll() { Array.from(this.notificationPanel.children).forEach(child => { this.removeNotification(child) }) @@ -202,7 +216,7 @@ customElements.define('sm-notifications', class extends HTMLElement { connectedCallback() { this.notificationPanel.addEventListener('click', e => { - if (e.target.closest('.close'))( + if (e.target.closest('.close')) ( this.removeNotification(e.target.closest('.notification')) ) }) @@ -210,11 +224,12 @@ customElements.define('sm-notifications', class extends HTMLElement { const observer = new MutationObserver(mutationList => { mutationList.forEach(mutation => { if (mutation.type === 'childList') { - if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) + if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) { setTimeout(() => { this.removeNotification(mutation.addedNodes[0]) }, 5000); } + } }) }) observer.observe(this.notificationPanel, { diff --git a/components/dist/notifications.min.js b/components/dist/notifications.min.js index 48bf48e..4e4552d 100644 --- a/components/dist/notifications.min.js +++ b/components/dist/notifications.min.js @@ -1 +1 @@ -const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.push=this.push.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}push(n,o={}){const{pinned:e}=o;let t=document.createElement("div"),i="";t.classList.add("notification"),e&&t.classList.add("pinned"),i+=`\n${n}
\n `,t.innerHTML=i,this.notificationPanel.append(t),t.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(1rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file +const smNotifications=document.createElement("template");smNotifications.innerHTML='\n\n\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.classList.add("notification");let a="";return a+=`\n${n}
\n `,i&&(e.classList.add("pinned"),a+='\n \n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(1rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}}); \ No newline at end of file diff --git a/components/dist/select.js b/components/dist/select.js index 3d062d0..8137fff 100644 --- a/components/dist/select.js +++ b/components/dist/select.js @@ -220,12 +220,17 @@ customElements.define('sm-select', class extends HTMLElement { e.preventDefault() if (document.activeElement.previousElementSibling) { document.activeElement.previousElementSibling.focus() + } else { + this.availableOptions[this.availableOptions.length - 1].focus() } } if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') { e.preventDefault() - if (document.activeElement.nextElementSibling) + if (document.activeElement.nextElementSibling) { document.activeElement.nextElementSibling.focus() + } else{ + this.availableOptions[0].focus() + } } }) this.addEventListener('optionSelected', e => { diff --git a/components/dist/select.min.js b/components/dist/select.min.js index 985181b..f93b92e 100644 --- a/components/dist/select.min.js +++ b/components/dist/select.min.js @@ -1 +1 @@ -const smSelect=document.createElement("template");smSelect.innerHTML='\n\nTo start using SM Components, Select components you want to download.
-To start using SM Components
-