diff --git a/components/dist/chips.js b/components/dist/chips.js
index 5dba66c..79a67bf 100644
--- a/components/dist/chips.js
+++ b/components/dist/chips.js
@@ -46,7 +46,6 @@ smChips.innerHTML = `
cursor: pointer;
align-items: center;
background: rgba(var(--background-color,(255,255,255)), 1);
- transition: opacity 0.2s;
grid-row: 1;
}
.nav-button--left{
@@ -64,7 +63,6 @@ smChips.innerHTML = `
height: 100%;
pointer-events: none;
grid-row: 1;
- transition: opacity 0.2s;
}
.cover--left{
grid-column: 1;
@@ -205,32 +203,20 @@ customElements.define('sm-chips', class extends HTMLElement {
const slot = this.shadowRoot.querySelector('slot');
slot.addEventListener('slotchange', e => {
+ firstOptionObserver.disconnect();
+ lastOptionObserver.disconnect();
+ this.observeSelf.disconnect();
// debounce to wait for all elements to be assigned
clearTimeout(this.slotChangeTimeout);
this.slotChangeTimeout = setTimeout(() => {
- firstOptionObserver.disconnect();
- lastOptionObserver.disconnect();
this.assignedElements = slot.assignedElements();
this.assignedElements.forEach(elem => {
if (elem.hasAttribute('selected')) {
this._value = elem.value;
}
});
- if (!this.hasAttribute('multiline')) {
- if (this.assignedElements.length > 0) {
- firstOptionObserver.observe(this.assignedElements[0]);
- lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
- }
- else {
- this.navButtonLeft.classList.add('hide');
- this.navButtonRight.classList.add('hide');
- this.coverLeft.classList.add('hide');
- this.coverRight.classList.add('hide');
- firstOptionObserver.disconnect();
- lastOptionObserver.disconnect();
- }
- }
- }, 100);
+ this.observeSelf.observe(this);
+ }, 0);
});
const resObs = new ResizeObserver(entries => {
entries.forEach(entry => {
@@ -244,6 +230,17 @@ customElements.define('sm-chips', class extends HTMLElement {
});
});
resObs.observe(this);
+
+ this.observeSelf = new IntersectionObserver(entries => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting && !this.hasAttribute('multiline') && this.assignedElements.length > 0) {
+ firstOptionObserver.observe(this.assignedElements[0]);
+ lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
+ }
+ });
+ }, {
+ threshold: 1,
+ });
this.chipsWrapper.addEventListener('option-clicked', e => {
if (this._value !== e.target.value) {
this.setSelectedOption(e.target.value);
@@ -262,7 +259,7 @@ customElements.define('sm-chips', class extends HTMLElement {
});
},
{
- threshold: 0.9,
+ threshold: 1,
root: this
});
const lastOptionObserver = new IntersectionObserver(entries => {
@@ -277,7 +274,7 @@ customElements.define('sm-chips', class extends HTMLElement {
});
},
{
- threshold: 0.9,
+ threshold: 1,
root: this
});
this.navButtonLeft.addEventListener('click', this.scrollLeft);
diff --git a/components/dist/chips.min.js b/components/dist/chips.min.js
index aed53c4..27a2054 100644
--- a/components/dist/chips.min.js
+++ b/components/dist/chips.min.js
@@ -1 +1 @@
-const smChips=document.createElement("template");smChips.innerHTML='\n\n\n\n',customElements.define("sm-chips",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChips.content.cloneNode(!0)),this.chipsWrapper=this.shadowRoot.querySelector(".sm-chips"),this.coverLeft=this.shadowRoot.querySelector(".cover--left"),this.coverRight=this.shadowRoot.querySelector(".cover--right"),this.navButtonLeft=this.shadowRoot.querySelector(".nav-button--left"),this.navButtonRight=this.shadowRoot.querySelector(".nav-button--right"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(t){this.setSelectedOption(t)}scrollLeft(){this.chipsWrapper.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.chipsWrapper.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(t){this._value!==t&&(this._value=t,this.assignedElements.forEach(e=>{e.value==t?(e.setAttribute("selected",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):e.removeAttribute("selected")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout(()=>{n.disconnect(),i.disconnect(),this.assignedElements=t.assignedElements(),this.assignedElements.forEach(t=>{t.hasAttribute("selected")&&(this._value=t.value)}),this.hasAttribute("multiline")||(this.assignedElements.length>0?(n.observe(this.assignedElements[0]),i.observe(this.assignedElements[this.assignedElements.length-1])):(this.navButtonLeft.classList.add("hide"),this.navButtonRight.classList.add("hide"),this.coverLeft.classList.add("hide"),this.coverRight.classList.add("hide"),n.disconnect(),i.disconnect()))},100)});const e=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});e.observe(this),this.chipsWrapper.addEventListener("option-clicked",t=>{this._value!==t.target.value&&(this.setSelectedOption(t.target.value),this.fireEvent())});const n=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(this.navButtonLeft.classList.add("hide"),this.coverLeft.classList.add("hide")):(this.navButtonLeft.classList.remove("hide"),this.coverLeft.classList.remove("hide"))})},{threshold:.9,root:this}),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(this.navButtonRight.classList.add("hide"),this.coverRight.classList.add("hide")):(this.navButtonRight.classList.remove("hide"),this.coverRight.classList.remove("hide"))})},{threshold:.9,root:this});this.navButtonLeft.addEventListener("click",this.scrollLeft),this.navButtonRight.addEventListener("click",this.scrollRight)}disconnectedCallback(){this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.navButtonRight.removeEventListener("click",this.scrollRight)}});const smChip=document.createElement("template");smChip.innerHTML='\n\n\n \n\n',customElements.define("sm-chip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChip.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
\ No newline at end of file
+const smChips=document.createElement("template");smChips.innerHTML='\n\n\n\n',customElements.define("sm-chips",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChips.content.cloneNode(!0)),this.chipsWrapper=this.shadowRoot.querySelector(".sm-chips"),this.coverLeft=this.shadowRoot.querySelector(".cover--left"),this.coverRight=this.shadowRoot.querySelector(".cover--right"),this.navButtonLeft=this.shadowRoot.querySelector(".nav-button--left"),this.navButtonRight=this.shadowRoot.querySelector(".nav-button--right"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(e){this.setSelectedOption(e)}scrollLeft(){this.chipsWrapper.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.chipsWrapper.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(e){this._value!==e&&(this._value=e,this.assignedElements.forEach(t=>{t.value==e?(t.setAttribute("selected",""),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):t.removeAttribute("selected")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const e=this.shadowRoot.querySelector("slot");e.addEventListener("slotchange",t=>{n.disconnect(),i.disconnect(),this.observeSelf.disconnect(),clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout(()=>{this.assignedElements=e.assignedElements(),this.assignedElements.forEach(e=>{e.hasAttribute("selected")&&(this._value=e.value)}),this.observeSelf.observe(this)},0)});const t=new ResizeObserver(e=>{e.forEach(e=>{if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.scrollDistance=.6*t.inlineSize}else this.scrollDistance=.6*e.contentRect.width})});t.observe(this),this.observeSelf=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&!this.hasAttribute("multiline")&&this.assignedElements.length>0&&(n.observe(this.assignedElements[0]),i.observe(this.assignedElements[this.assignedElements.length-1]))})},{threshold:1}),this.chipsWrapper.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this.setSelectedOption(e.target.value),this.fireEvent())});const n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(this.navButtonLeft.classList.add("hide"),this.coverLeft.classList.add("hide")):(this.navButtonLeft.classList.remove("hide"),this.coverLeft.classList.remove("hide"))})},{threshold:1,root:this}),i=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(this.navButtonRight.classList.add("hide"),this.coverRight.classList.add("hide")):(this.navButtonRight.classList.remove("hide"),this.coverRight.classList.remove("hide"))})},{threshold:1,root:this});this.navButtonLeft.addEventListener("click",this.scrollLeft),this.navButtonRight.addEventListener("click",this.scrollRight)}disconnectedCallback(){this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.navButtonRight.removeEventListener("click",this.scrollRight)}});const smChip=document.createElement("template");smChip.innerHTML='\n\n\n \n\n',customElements.define("sm-chip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChip.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(e){"Enter"!==e.key&&"Space"!==e.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
\ No newline at end of file