@@ -143,9 +140,11 @@ customElements.define('sm-select', class extends HTMLElement {
this.handleOptionSelection = this.handleOptionSelection.bind(this)
this.handleKeydown = this.handleKeydown.bind(this)
this.handleClickOutside = this.handleClickOutside.bind(this)
+ this.selectOption = this.selectOption.bind(this)
this.availableOptions
this.previousOption
+ this._value = undefined;
this.isOpen = false;
this.label = ''
this.slideDown = [{
@@ -173,7 +172,6 @@ customElements.define('sm-select', class extends HTMLElement {
}
this.optionList = this.shadowRoot.querySelector('.options')
- this.chevron = this.shadowRoot.querySelector('.toggle')
this.selection = this.shadowRoot.querySelector('.selection')
this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
}
@@ -187,12 +185,7 @@ customElements.define('sm-select', class extends HTMLElement {
const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
if (selectedOption) {
this.setAttribute('value', val)
- this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
- if (this.previousOption) {
- this.previousOption.classList.remove('check-selected')
- }
- selectedOption.classList.add('check-selected')
- this.previousOption = selectedOption
+ this.selectOption(selectedOption)
} else {
console.warn(`There is no option with ${val} as value`)
}
@@ -200,19 +193,25 @@ customElements.define('sm-select', class extends HTMLElement {
reset(fire = true) {
if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
- const firstElement = this.availableOptions[0];
- if (this.previousOption) {
- this.previousOption.classList.remove('check-selected')
- }
- firstElement.classList.add('check-selected')
- this.value = firstElement.getAttribute('value')
- this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
- this.previousOption = firstElement;
+ const selectedOption = this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0];
+ this.value = selectedOption.getAttribute('value')
if (fire) {
this.fireEvent()
}
}
}
+ selectOption(selectedOption) {
+ if (this.previousOption) {
+ this.previousOption.classList.remove('check-selected')
+ this.previousOption.removeAttribute('selected')
+ }
+ if (this.previousOption !== selectedOption) {
+ selectedOption.classList.add('check-selected')
+ selectedOption.setAttribute('selected', '')
+ this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
+ this.previousOption = selectedOption
+ }
+ }
focusIn() {
this.selection.focus()
@@ -221,11 +220,11 @@ customElements.define('sm-select', class extends HTMLElement {
open() {
this.optionList.classList.remove('hide')
this.optionList.animate(this.slideDown, this.animationOptions)
- this.chevron.classList.add('rotate')
+ this.setAttribute('open', '')
this.isOpen = true
}
collapse() {
- this.chevron.classList.remove('rotate')
+ this.removeAttribute('open')
this.optionList.animate(this.slideUp, this.animationOptions)
.onfinish = () => {
this.optionList.classList.add('hide')
@@ -317,6 +316,11 @@ customElements.define('sm-select', class extends HTMLElement {
let slot = this.shadowRoot.querySelector('slot')
slot.addEventListener('slotchange', e => {
this.availableOptions = slot.assignedElements()
+ this.availableOptions.forEach(elem => {
+ if (elem.hasAttribute('selected')) {
+ this._value = elem.value;
+ }
+ });
this.reset(false)
});
this.addEventListener('click', this.handleClick)
@@ -374,13 +378,13 @@ smOption.innerHTML = `
}
:host(:focus){
outline: none;
- background: rgba(var(--text-color), 0.1);
+ background: rgba(var(--text-color,(17,17,17)), 0.1);
}
.icon {
opacity: 0;
height: 1.2rem;
width: 1.2rem;
- fill: rgba(var(--text-color), 0.8);
+ fill: rgba(var(--text-color,(17,17,17)), 0.8);
}
:host(:focus) .option .icon{
opacity: 0.4
@@ -390,7 +394,7 @@ smOption.innerHTML = `
}
@media (hover: hover){
.option:hover{
- background: rgba(var(--text-color), 0.1);
+ background: rgba(var(--text-color,(17,17,17)), 0.1);
}
:host(:not(.check-selected):hover) .icon{
opacity: 0.4
diff --git a/components/dist/select.min.js b/components/dist/select.min.js
index 900a94c..1b87aed 100644
--- a/components/dist/select.min.js
+++ b/components/dist/select.min.js
@@ -1 +1 @@
-const smSelect=document.createElement("template");smSelect.innerHTML='\n\n
',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.availableOptions,this.previousOption,this.isOpen=!1,this.label="",this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label"]}get value(){return this.getAttribute("value")}set value(t){const e=this.availableOptions.find(e=>e.getAttribute("value")===t);e?(this.setAttribute("value",t),this.selectedOptionText.textContent=`${this.label}${e.textContent}`,this.previousOption&&this.previousOption.classList.remove("check-selected"),e.classList.add("check-selected"),this.previousOption=e):console.warn(`There is no option with ${t} as value`)}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions[0];this.previousOption&&this.previousOption.classList.remove("check-selected"),e.classList.add("check-selected"),this.value=e.getAttribute("value"),this.selectedOptionText.textContent=`${this.label}${e.textContent}`,this.previousOption=e,t&&this.fireEvent()}}focusIn(){this.selection.focus()}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.key&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.fireEvent())}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.key?(t.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(t)):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.collapse()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{this.availableOptions=t.assignedElements(),this.reset(!1)}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(t){"disabled"===t?this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0")}});
\ No newline at end of file
+const smSelect=document.createElement("template");smSelect.innerHTML='\n\n
',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.selectOption=this.selectOption.bind(this),this.availableOptions,this.previousOption,this._value=void 0,this.isOpen=!1,this.label="",this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label"]}get value(){return this.getAttribute("value")}set value(t){const e=this.availableOptions.find(e=>e.getAttribute("value")===t);e?(this.setAttribute("value",t),this.selectOption(e)):console.warn(`There is no option with ${t} as value`)}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions.find(t=>t.hasAttribute("selected"))||this.availableOptions[0];this.value=e.getAttribute("value"),t&&this.fireEvent()}}selectOption(t){this.previousOption&&(this.previousOption.classList.remove("check-selected"),this.previousOption.removeAttribute("selected")),this.previousOption!==t&&(t.classList.add("check-selected"),t.setAttribute("selected",""),this.selectedOptionText.textContent=`${this.label}${t.textContent}`,this.previousOption=t)}focusIn(){this.selection.focus()}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.setAttribute("open",""),this.isOpen=!0}collapse(){this.removeAttribute("open"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.key&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.fireEvent())}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.key?(t.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(t)):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.collapse()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{this.availableOptions=t.assignedElements(),this.availableOptions.forEach(t=>{t.hasAttribute("selected")&&(this._value=t.value)}),this.reset(!1)}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(t){"disabled"===t?this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='\n\n
',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0")}});
\ No newline at end of file
diff --git a/components/dist/spinner.js b/components/dist/spinner.js
index 1282641..f2f970f 100644
--- a/components/dist/spinner.js
+++ b/components/dist/spinner.js
@@ -7,17 +7,12 @@ spinner.innerHTML = `
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
-:host{
- --accent-color: #4d2588;
- --height: 1.6rem;
- --width: 1.6rem;
-}
.loader {
- height: var(--height);
- width: var(--weight);
+ height: var(--size, 1.5rem);
+ width: var(--size, 1.5rem);
stroke-width: 8;
overflow: visible;
- stroke: var(--accent-color);
+ stroke: var(--accent-color, teal);
fill: none;
stroke-dashoffset: 180;
stroke-dasharray: 180;
diff --git a/components/dist/spinner.min.js b/components/dist/spinner.min.js
index b364bae..33542ef 100644
--- a/components/dist/spinner.min.js
+++ b/components/dist/spinner.min.js
@@ -1 +1 @@
-const spinner=document.createElement("template");spinner.innerHTML='\n\n
\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);
\ No newline at end of file
+const spinner=document.createElement("template");spinner.innerHTML='\n\n
\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);
\ No newline at end of file
diff --git a/components/dist/strip-select.js b/components/dist/strip-select.js
index 32ba04d..36242c2 100644
--- a/components/dist/strip-select.js
+++ b/components/dist/strip-select.js
@@ -8,9 +8,6 @@ stripSelect.innerHTML = `
box-sizing: border-box;
}
:host{
- --accent-color: #4d2588;
- --text-color: 17, 17, 17;
- --background-color: 255, 255, 255;
padding: 1rem 0;
}
.hide{
@@ -50,7 +47,7 @@ stripSelect.innerHTML = `
cursor: pointer;
position: absolute;
align-items: center;
- background: rgba(var(--background-color), 1);
+ background: rgba(var(--background-color,(255,255,255)), 1);
transform: translateY(-50%);
}
.nav-button--right{
@@ -69,7 +66,7 @@ stripSelect.innerHTML = `
.icon{
height: 1.5rem;
width: 1.5rem;
- fill: rgba(var(--text-color), .8);
+ fill: rgba(var(--text-color,(17,17,17)), .8);
}
@media (hover: none){
::-webkit-scrollbar {
@@ -85,11 +82,11 @@ stripSelect.innerHTML = `
width: 2rem;
}
.cover--left{
- background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent);
+ background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);
}
.cover--right{
right: 0;
- background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1));
+ background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));
}
}
@media (hover: hover){
@@ -104,11 +101,11 @@ stripSelect.innerHTML = `
overflow: hidden;
}
.cover--left{
- background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);
+ background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);
}
.cover--right{
right: 0;
- background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);
+ background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);
}
}
@@ -137,14 +134,19 @@ customElements.define('strip-select', class extends HTMLElement {
this.slottedOptions = undefined;
this._value = undefined;
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(val) {
+ this.setSelectedOption(val);
+ }
scrollLeft() {
this.stripSelect.scrollBy({
left: -this.scrollDistance,
@@ -158,6 +160,19 @@ customElements.define('strip-select', class extends HTMLElement {
behavior: 'smooth'
});
}
+ setSelectedOption(value) {
+ if (this._value === value) return
+ this._value = value;
+ this.assignedElements.forEach(elem => {
+ if (elem.value === value) {
+ elem.setAttribute('active', '');
+ elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+ }
+ else
+ elem.removeAttribute('active')
+ });
+ }
+
fireEvent() {
this.dispatchEvent(
new CustomEvent("change", {
@@ -178,17 +193,17 @@ customElements.define('strip-select', class extends HTMLElement {
const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
slot.addEventListener('slotchange', e => {
- const assignedElements = slot.assignedElements();
- assignedElements.forEach(elem => {
+ this.assignedElements = slot.assignedElements();
+ this.assignedElements.forEach(elem => {
if (elem.hasAttribute('selected')) {
elem.setAttribute('active', '');
this._value = elem.value;
}
});
if (!this.hasAttribute('multiline')) {
- if (assignedElements.length > 0) {
- firstOptionObserver.observe(slot.assignedElements()[0]);
- lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]);
+ if (this.assignedElements.length > 0) {
+ firstOptionObserver.observe(this.assignedElements[0]);
+ lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
}
else {
navButtonLeft.classList.add('hide');
@@ -215,10 +230,7 @@ customElements.define('strip-select', class extends HTMLElement {
resObs.observe(this);
this.stripSelect.addEventListener('option-clicked', e => {
if (this._value !== e.target.value) {
- this._value = e.target.value;
- slot.assignedElements().forEach(elem => elem.removeAttribute('active'));
- e.target.setAttribute('active', '');
- e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+ this.setSelectedOption(e.target.value);
this.fireEvent();
}
});
@@ -273,9 +285,6 @@ stripOption.innerHTML = `
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
- :host{
- --background-color: inherit;
- }
.strip-option{
display: flex;
flex-shrink: 0;
@@ -287,17 +296,17 @@ stripOption.innerHTML = `
-webkit-tap-highlight-color: transparent;
}
:host([active]) .strip-option{
- color: var(--active-option-color, inherit);
- background-color: var(--active-background-color, rgba(var(--text-color), 0.06));
+ color: var(--active-option-color, rgba(var(--background-color,white)));
+ background-color: var(--active-background-color, var(--accent-color,teal));
}
:host(:focus-within){
outline: none;
}
:host(:focus-within) .strip-option{
- box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
}
:host(:hover:not([active])) .strip-option{
- background-color: rgba(var(--text-color), 0.06);
+ background-color: rgba(var(--text-color,(17,17,17)), 0.06);
}
diff --git a/components/dist/strip-select.min.js b/components/dist/strip-select.min.js
index fd73cd2..17fb80d 100644
--- a/components/dist/strip-select.min.js
+++ b/components/dist/strip-select.min.js
@@ -1 +1 @@
-const stripSelect=document.createElement("template");stripSelect.innerHTML='\n\n\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}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"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),o=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",s=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(r.observe(t.assignedElements()[0]),a.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),o.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const s=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})});s.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(o.classList.add("hide"),n.classList.add("hide")):(o.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),o.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n\n\n \n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.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 stripSelect=document.createElement("template");stripSelect.innerHTML='\n\n\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),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.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(t){this._value!==t&&(this._value=t,this.assignedElements.forEach(e=>{e.value===t?(e.setAttribute("active",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):e.removeAttribute("active")}))}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"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),s=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",o=>{this.assignedElements=t.assignedElements(),this.assignedElements.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(this.assignedElements.length>0?(r.observe(this.assignedElements[0]),a.observe(this.assignedElements[this.assignedElements.length-1])):(i.classList.add("hide"),s.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const o=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})});o.observe(this),this.stripSelect.addEventListener("option-clicked",t=>{this._value!==t.target.value&&(this.setSelectedOption(t.target.value),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(s.classList.add("hide"),n.classList.add("hide")):(s.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),s.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n\n\n \n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.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
diff --git a/components/dist/switch.js b/components/dist/switch.js
index d31ebf9..c23d9d0 100644
--- a/components/dist/switch.js
+++ b/components/dist/switch.js
@@ -1,3 +1,5 @@
+//switch
+
const smSwitch = document.createElement('template')
smSwitch.innerHTML = `
@@ -173,6 +172,9 @@ customElements.define('sm-switch', class extends HTMLElement {
this.removeAttribute('checked')
}
}
+ get value() {
+ return this.isChecked
+ }
reset() {
diff --git a/components/dist/switch.min.js b/components/dist/switch.min.js
index 5820148..b1d1ee9 100644
--- a/components/dist/switch.min.js
+++ b/components/dist/switch.min.js
@@ -1 +1 @@
-const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n\n\n ',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",n=>{" "!==n.key||this.isDisabled||(n.preventDefault(),this.input.click())}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,t,e){t!==e&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
\ No newline at end of file
+const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n\n\n ',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}get value(){return this.isChecked}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",n=>{" "!==n.key||this.isDisabled||(n.preventDefault(),this.input.click())}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,e,t){e!==t&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
\ No newline at end of file
diff --git a/components/dist/tabs.js b/components/dist/tabs.js
index 7a3a4d4..a2e9fae 100644
--- a/components/dist/tabs.js
+++ b/components/dist/tabs.js
@@ -11,9 +11,6 @@ smTabHeader.innerHTML = `
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- --accent-color: #4d2588;
- --text-color: 17, 17, 17;
- --background-color: 255, 255, 255;
--gap: 1rem;
--justify-content: flex-start;
--tab-indicator-border-radius: 0.3rem;
@@ -41,7 +38,7 @@ smTabHeader.innerHTML = `
bottom: 0;
height: 0.15rem;
border-radius: 1rem 1rem 0 0;
- background: var(--accent-color);
+ background: var(--accent-color, tea);
-webkit-transition: width 0.3s, -webkit-transform 0.3s;
transition: width 0.3s, -webkit-transform 0.3s;
-o-transition: transform 0.3s, width 0.3s;
@@ -67,10 +64,10 @@ smTabHeader.innerHTML = `
border-radius: 0.3rem;
}
:host([variant="tab"]) slot::slotted(.active){
- color: rgba(var(--background-color), 1);
+ color: rgba(var(--background-color, (255,255,255)), 1);
}
slot::slotted(.active){
- color: var(--accent-color);
+ color: var(--accent-color, tea);
opacity: 1;
}
@media (any-hover: none){
diff --git a/components/dist/tabs.min.js b/components/dist/tabs.min.js
index 54532d0..f50e971 100644
--- a/components/dist/tabs.min.js
+++ b/components/dist/tabs.min.js
@@ -1 +1 @@
-const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n\n\n \n
\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this),this.moveIndiactor=this.moveIndiactor.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),this.tabHeader.scrollTo({behavior:"smooth",left:t.getBoundingClientRect().left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,n)=>{t.dataset.index=n})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let n=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});n.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.innerHTML='\n\n\n
\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n\n\n Nothing to see here. \n
\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.allPanels=t.target.assignedElements(),this.allPanels.forEach((t,e)=>{t.dataset.index=e,n.observe(t)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const n=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});
\ No newline at end of file
+const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n\n\n \n
\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this),this.moveIndiactor=this.moveIndiactor.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),this.tabHeader.scrollTo({behavior:"smooth",left:t.getBoundingClientRect().left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,e)=>{t.dataset.index=e})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.innerHTML='\n\n\n
\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n\n\n Nothing to see here. \n
\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.allPanels=t.target.assignedElements(),this.allPanels.forEach((t,n)=>{t.dataset.index=n,e.observe(t)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const e=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});
\ No newline at end of file
diff --git a/components/dist/tags-input.js b/components/dist/tags-input.js
index 3b66201..6408c1a 100644
--- a/components/dist/tags-input.js
+++ b/components/dist/tags-input.js
@@ -7,12 +7,9 @@ tagsInput.innerHTML = `
box-sizing: border-box;
}
:host{
- --accent-color: #4d2588;
- --text-color: 17, 17, 17;
- --background-color: 255, 255, 255;
- --danger-color: red;
+ --danger-color: red;
--border-radius: 0.3rem;
- --background: rgba(var(--text-color), 0.06);
+ --background: rgba(var(--text-color,(17,17,17)), 0.06);
}
.hide{
display: none !important;
@@ -29,7 +26,7 @@ tagsInput.innerHTML = `
background: var(--background);
}
.tags-wrapper:focus-within{
- box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
+ box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
}
.tag {
@@ -41,14 +38,14 @@ tagsInput.innerHTML = `
border-radius: 0.3rem;
padding: 0.3rem 0.5rem;
margin: 0 0.5rem 0.5rem 0;
- background-color: rgba(var(--text-color), 0.06);
+ background-color: rgba(var(--text-color,(17,17,17)), 0.06);
}
.icon {
height: 1.2rem;
width: 1.2rem;
margin-left: 0.3rem;
- fill: rgba(var(--text-color), 0.8);
+ fill: rgba(var(--text-color,(17,17,17)), 0.8);
}
input,
@@ -74,7 +71,7 @@ tagsInput.innerHTML = `
top: 50%;
font-weight: 500;
transform: translateY(-50%);
- color: rgba(var(--text-color), 0.6);
+ color: rgba(var(--text-color,(17,17,17)), 0.6);
}
@@ -161,7 +158,7 @@ customElements.define('tags-input', class extends HTMLElement {
backgroundColor: 'initial'
},
{
- backgroundColor: 'var(--accent-color)'
+ backgroundColor: 'var(--accent-color,teal)'
},
{
backgroundColor: 'initial'
diff --git a/components/dist/tags-input.min.js b/components/dist/tags-input.min.js
index 1c2cb53..3889f17 100644
--- a/components/dist/tags-input.min.js
+++ b/components/dist/tags-input.min.js
@@ -1 +1 @@
-const tagsInput=document.createElement("template");tagsInput.innerHTML='\n \n
\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.addTag=this.addTag.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].filter(t=>void 0!==t)}set value(t){this.reset(),[...new Set(t.filter(t=>void 0!==t))].forEach(t=>this.addTag(t))}get isValid(){return this.tags.size}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}addTag(t){const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n
${t} \n
\n `,this.input.before(e),this.tags.add(t)}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key){const e=t.target.value.trim();if(this.tags.has(e)?this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"}):this.addTag(e),t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit
this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
\ No newline at end of file
+const tagsInput=document.createElement("template");tagsInput.innerHTML='\n \n \n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.addTag=this.addTag.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].filter(t=>void 0!==t)}set value(t){this.reset(),[...new Set(t.filter(t=>void 0!==t))].forEach(t=>this.addTag(t))}get isValid(){return this.tags.size}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}addTag(t){const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n ${t} \n this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
\ No newline at end of file
diff --git a/components/dist/text-field.js b/components/dist/text-field.js
index c692294..0b4330b 100644
--- a/components/dist/text-field.js
+++ b/components/dist/text-field.js
@@ -5,17 +5,13 @@ textField.innerHTML = `
padding: 0;
margin: 0;
box-sizing: border-box;
- }
- :host{
- --accent-color: #4d2588;
- --text-color: 17, 17, 17;
- --background-color: 255, 255, 255;
- }
+ }
.text-field{
display: flex;
align-items: center;
}
.text{
+ padding: 0.6rem 0;
transition: background-color 0.3s;
border-bottom: 0.15rem solid transparent;
overflow-wrap: break-word;
@@ -37,33 +33,41 @@ textField.innerHTML = `
.editable{
border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);
}
- .edit-button{
- display: grid;
+ .icon-container{
position: relative;
margin-left: 0.5rem;
- background-color: transparent;
- border: none;
- }
- :host([disabled]) .edit-button{
- display: none;
+ height: 1.8rem;
+ width: 1.8rem;
}
.icon{
- grid-area: 1/-1;
+ position: absolute;
cursor: pointer;
- height: 1.2rem;
- width: 1.2rem;
- fill: rgba(var(--text-color), 1);
+ fill: none;
+ stroke-width: 8;
+ stroke: rgba(var(--text-color), 1);
+ height: 1.8rem;
+ width: 1.8rem;
+ padding: 0.4rem;
+ overflow: visible;
+ stroke-linecap: round;
+ stroke-linejoin: round;
}
.hide{
- visibility: hidden;
+ display: none;
}
-
-
+
+
+ Edit
+
+
+ Save
+
+
`
@@ -78,35 +82,32 @@ customElements.define('text-field', class extends HTMLElement {
this.textContainer = this.textField.children[0]
this.iconsContainer = this.textField.children[1]
this.editButton = this.textField.querySelector('.edit-button')
+ this.saveButton = this.textField.querySelector('.save-button')
this.isTextEditable = false
this.isDisabled = false
-
- this.fireEvent = this.fireEvent.bind(this)
- this.setEditable = this.setEditable.bind(this)
- this.setNonEditable = this.setNonEditable.bind(this)
- this.toggleEditable = this.toggleEditable.bind(this)
- this.revert = this.revert.bind(this)
}
static get observedAttributes() {
- return ['disabled', 'value']
+ return ['disable']
}
get value() {
return this.text
}
set value(val) {
+ this.text = val
+ this.textContainer.textContent = val
this.setAttribute('value', val)
}
set disabled(val) {
this.isDisabled = val
if (this.isDisabled)
- this.setAttribute('disabled', '')
+ this.setAttribute('disable', '')
else
- this.removeAttribute('disabled')
+ this.removeAttribute('disable')
}
- fireEvent(value) {
- let event = new CustomEvent('change', {
+ fireEvent = (value) => {
+ let event = new CustomEvent('contentchanged', {
bubbles: true,
cancelable: true,
composed: true,
@@ -117,50 +118,42 @@ customElements.define('text-field', class extends HTMLElement {
this.dispatchEvent(event);
}
- setEditable() {
+ setEditable = () => {
if (this.isTextEditable) return
this.textContainer.contentEditable = true
this.textContainer.classList.add('editable')
this.textContainer.focus()
document.execCommand('selectAll', false, null);
- this.editButton.children[0].animate(this.rotateOut, this.animOptions).onfinish = () => {
- this.editButton.children[0].classList.add('hide')
+ this.editButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
+ this.editButton.classList.add('hide')
}
setTimeout(() => {
- this.editButton.children[1].classList.remove('hide')
- this.editButton.children[1].animate(this.rotateIn, this.animOptions)
+ this.saveButton.classList.remove('hide')
+ this.saveButton.animate(this.rotateIn, this.animOptions)
}, 100);
this.isTextEditable = true
}
- setNonEditable() {
+ setNonEditable = () => {
if (!this.isTextEditable) return
this.textContainer.contentEditable = false
this.textContainer.classList.remove('editable')
- const newValue = this.textContainer.textContent.trim()
- if (this.text !== newValue && newValue !== '') {
+
+ if (this.text !== this.textContainer.textContent.trim()) {
this.setAttribute('value', this.textContainer.textContent)
this.text = this.textContainer.textContent.trim()
this.fireEvent(this.text)
- } else {
- this.value = this.text
}
- this.editButton.children[1].animate(this.rotateOut, this.animOptions).onfinish = () => {
- this.editButton.children[1].classList.add('hide')
+ this.saveButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
+ this.saveButton.classList.add('hide')
}
setTimeout(() => {
- this.editButton.children[0].classList.remove('hide')
- this.editButton.children[0].animate(this.rotateIn, this.animOptions)
+ this.editButton.classList.remove('hide')
+ this.editButton.animate(this.rotateIn, this.animOptions)
}, 100);
this.isTextEditable = false
}
- toggleEditable() {
- if (this.isTextEditable)
- this.setNonEditable()
- else
- this.setEditable()
- }
- revert() {
+ revert = () => {
if (this.textContainer.isContentEditable) {
this.value = this.text
this.setNonEditable()
@@ -173,7 +166,7 @@ customElements.define('text-field', class extends HTMLElement {
this.text = this.getAttribute('value')
this.textContainer.textContent = this.text
}
- if (this.hasAttribute('disabled'))
+ if (this.hasAttribute('disable'))
this.isDisabled = true
else
this.isDisabled = false
@@ -206,27 +199,30 @@ customElements.define('text-field', class extends HTMLElement {
if (!this.isDisabled) {
this.iconsContainer.classList.remove('hide')
this.textContainer.addEventListener('dblclick', this.setEditable)
- this.editButton.addEventListener('click', this.toggleEditable)
+ this.editButton.addEventListener('click', this.setEditable)
+ this.saveButton.addEventListener('click', this.setNonEditable)
}
}
- attributeChangedCallback(name, oldValue, newValue) {
- if (name === 'disabled') {
- if (this.hasAttribute('disabled')) {
+ attributeChangedCallback(name) {
+ if (name === 'disable') {
+ if (this.hasAttribute('disable')) {
+ this.iconsContainer.classList.add('hide')
this.textContainer.removeEventListener('dblclick', this.setEditable)
- this.editButton.removeEventListener('click', this.toggleEditable)
+ this.editButton.removeEventListener('click', this.setEditable)
+ this.saveButton.removeEventListener('click', this.setNonEditable)
this.revert()
}
else {
+ this.iconsContainer.classList.remove('hide')
this.textContainer.addEventListener('dblclick', this.setEditable)
- this.editButton.addEventListener('click', this.toggleEditable)
+ this.editButton.addEventListener('click', this.setEditable)
+ this.saveButton.addEventListener('click', this.setNonEditable)
}
- } else if (name === 'value') {
- this.text = newValue
- this.textContainer.textContent = newValue
}
}
disconnectedCallback() {
this.textContainer.removeEventListener('dblclick', this.setEditable)
- this.editButton.removeEventListener('click', this.toggleEditable)
+ this.editButton.removeEventListener('click', this.setEditable)
+ this.saveButton.removeEventListener('click', this.setNonEditable)
}
})
\ No newline at end of file
diff --git a/components/dist/textarea.js b/components/dist/textarea.js
index 4186fa2..e4ab3ff 100644
--- a/components/dist/textarea.js
+++ b/components/dist/textarea.js
@@ -1,114 +1,111 @@
const smTextarea = document.createElement('template')
smTextarea.innerHTML = `
-
-
-
-`;
+
+
+
+ `;
customElements.define('sm-textarea',
class extends HTMLElement {
constructor() {
diff --git a/components/dist/textarea.min.js b/components/dist/textarea.min.js
index c082287..ca7e1a7 100644
--- a/components/dist/textarea.min.js
+++ b/components/dist/textarea.min.js
@@ -1 +1 @@
-const smTextarea=document.createElement("template");smTextarea.innerHTML='\n\n\n \n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
\ No newline at end of file
+const smTextarea=document.createElement("template");smTextarea.innerHTML='\n \n \n \n ',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
\ No newline at end of file
diff --git a/components/dist/theme-toggle.js b/components/dist/theme-toggle.js
index 385a35a..393fb03 100644
--- a/components/dist/theme-toggle.js
+++ b/components/dist/theme-toggle.js
@@ -31,7 +31,7 @@ themeToggle.innerHTML = `
pointer-events: none;
transition: transform 0.3s, opacity 0.3s;
transform: translate(-50%, -50%) scale(1.2);
- background-color: rgba(var(--text-color), 0.12);
+ background-color: rgba(var(--text-color,inherit), 0.12);
}
:host(:focus-within) .theme-toggle{
outline: none;
@@ -44,7 +44,7 @@ themeToggle.innerHTML = `
position: absolute;
height: 100%;
width: 100%;
- fill: rgba(var(--text-color), 1);
+ fill: rgba(var(--text-color,inherit), 1);
transition: transform 0.3s, opacity 0.1s;
}
diff --git a/components/dist/theme-toggle.min.js b/components/dist/theme-toggle.min.js
index 0cdc57b..3d036c9 100644
--- a/components/dist/theme-toggle.min.js
+++ b/components/dist/theme-toggle.min.js
@@ -1 +1 @@
-const themeToggle=document.createElement("template");themeToggle.innerHTML='\n \n \n \n \n \n \n \n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(e){" "===e.key&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem(`${window.location.hostname}-theme`,"dark")):(this.daylight(),localStorage.setItem(`${window.location.hostname}-theme`,"light")))}}window.customElements.define("theme-toggle",ThemeToggle);
\ No newline at end of file
+const themeToggle=document.createElement("template");themeToggle.innerHTML='\n \n \n \n \n \n \n \n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(e){" "===e.key&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem(`${window.location.hostname}-theme`,"dark")):(this.daylight(),localStorage.setItem(`${window.location.hostname}-theme`,"light")))}}window.customElements.define("theme-toggle",ThemeToggle);
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index c269165..52678b5 100644
--- a/components/index.html
+++ b/components/index.html
@@ -1620,7 +1620,7 @@
the number of lines textarea should expand or let the textarea expand according to user input until
a max-height is reached.
Interactive demo
-
<sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"></sm-textarea>
@@ -2160,12 +2160,12 @@
const rippleAnimation = circle.animate(
[
{
- transform: "scale(3)",
+ transform: "scale(4)",
opacity: 0,
},
],
{
- duration: 1000,
+ duration: 600,
fill: "forwards",
easing: "ease-out",
}
diff --git a/components/index.min.html b/components/index.min.html
index 8478b43..00fdfab 100644
--- a/components/index.min.html
+++ b/components/index.min.html
@@ -255,7 +255,7 @@
console.log(getTags.value); /* returns an array of string that are user input */
</script>
- Textarea Textarea is suitable component where multiline input is required. you can either specify the number of lines textarea should expand or let the textarea expand according to user input until a max-height is reached.
Interactive demo
+ Textarea Textarea is suitable component where multiline input is required. you can either specify the number of lines textarea should expand or let the textarea expand according to user input until a max-height is reached.
Interactive demo
<sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"></sm-textarea>
@@ -549,12 +549,12 @@
const rippleAnimation = circle.animate(
[
{
- transform: "scale(3)",
+ transform: "scale(4)",
opacity: 0,
},
],
{
- duration: 1000,
+ duration: 600,
fill: "forwards",
easing: "ease-out",
}