Code refactoring and bug fixes
This commit is contained in:
sairaj mote
parent
c2bfbba229
commit
2c0cbbff3e
@ -1,5 +1,5 @@
|
||||
const stripSelect = document.createElement('template');
|
||||
stripSelect.innerHTML = `
|
||||
const smChips = document.createElement('template');
|
||||
smChips.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
@ -24,17 +24,17 @@ stripSelect.innerHTML = `
|
||||
grid-template-columns: min-content minmax(0,1fr) min-content;
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
.strip-select{
|
||||
.sm-chips{
|
||||
display: flex;
|
||||
position: relative;
|
||||
grid-area: 1/1/2/-1;
|
||||
gap: var(--gap, 0.5rem);
|
||||
overflow: auto hidden;
|
||||
}
|
||||
:host([multiline]) .strip-select{
|
||||
:host([multiline]) .sm-chips{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
:host(:not([multiline])) .strip-select{
|
||||
:host(:not([multiline])) .sm-chips{
|
||||
max-width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
@ -87,7 +87,7 @@ stripSelect.innerHTML = `
|
||||
.nav-button{
|
||||
display: none;
|
||||
}
|
||||
.strip-select{
|
||||
.sm-chips{
|
||||
overflow: auto hidden;
|
||||
}
|
||||
.cover{
|
||||
@ -109,7 +109,7 @@ stripSelect.innerHTML = `
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.strip-select{
|
||||
.sm-chips{
|
||||
overflow: hidden;
|
||||
}
|
||||
.cover--left{
|
||||
@ -126,7 +126,7 @@ stripSelect.innerHTML = `
|
||||
<button class="nav-button nav-button--left hide">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
|
||||
</button>
|
||||
<section class="strip-select">
|
||||
<section class="sm-chips">
|
||||
<slot></slot>
|
||||
</section>
|
||||
<button class="nav-button nav-button--right hide">
|
||||
@ -136,13 +136,17 @@ stripSelect.innerHTML = `
|
||||
</section>
|
||||
|
||||
`;
|
||||
customElements.define('strip-select', class extends HTMLElement {
|
||||
customElements.define('sm-chips', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(stripSelect.content.cloneNode(true));
|
||||
this.stripSelect = this.shadowRoot.querySelector('.strip-select');
|
||||
}).append(smChips.content.cloneNode(true));
|
||||
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 = undefined;
|
||||
this._value = undefined;
|
||||
this.scrollDistance = 0;
|
||||
@ -160,14 +164,14 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
this.setSelectedOption(val);
|
||||
}
|
||||
scrollLeft() {
|
||||
this.stripSelect.scrollBy({
|
||||
this.chipsWrapper.scrollBy({
|
||||
left: -this.scrollDistance,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
scrollRight() {
|
||||
this.stripSelect.scrollBy({
|
||||
this.chipsWrapper.scrollBy({
|
||||
left: this.scrollDistance,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
@ -176,7 +180,7 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
if (this._value === value) return
|
||||
this._value = value;
|
||||
this.assignedElements.forEach(elem => {
|
||||
if (elem.value === value) {
|
||||
if (elem.value == value) {
|
||||
elem.setAttribute('selected', '');
|
||||
elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
|
||||
}
|
||||
@ -200,14 +204,12 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
this.setAttribute('role', 'listbox');
|
||||
|
||||
const slot = this.shadowRoot.querySelector('slot');
|
||||
const coverLeft = this.shadowRoot.querySelector('.cover--left');
|
||||
const coverRight = this.shadowRoot.querySelector('.cover--right');
|
||||
const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
|
||||
const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
|
||||
slot.addEventListener('slotchange', e => {
|
||||
// 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')) {
|
||||
@ -220,10 +222,10 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
|
||||
}
|
||||
else {
|
||||
navButtonLeft.classList.add('hide');
|
||||
navButtonRight.classList.add('hide');
|
||||
coverLeft.classList.add('hide');
|
||||
coverRight.classList.add('hide');
|
||||
this.navButtonLeft.classList.add('hide');
|
||||
this.navButtonRight.classList.add('hide');
|
||||
this.coverLeft.classList.add('hide');
|
||||
this.coverRight.classList.add('hide');
|
||||
firstOptionObserver.disconnect();
|
||||
lastOptionObserver.disconnect();
|
||||
}
|
||||
@ -242,7 +244,7 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
});
|
||||
});
|
||||
resObs.observe(this);
|
||||
this.stripSelect.addEventListener('option-clicked', e => {
|
||||
this.chipsWrapper.addEventListener('option-clicked', e => {
|
||||
if (this._value !== e.target.value) {
|
||||
this.setSelectedOption(e.target.value);
|
||||
this.fireEvent();
|
||||
@ -251,11 +253,11 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
const firstOptionObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
navButtonLeft.classList.add('hide');
|
||||
coverLeft.classList.add('hide');
|
||||
this.navButtonLeft.classList.add('hide');
|
||||
this.coverLeft.classList.add('hide');
|
||||
} else {
|
||||
navButtonLeft.classList.remove('hide');
|
||||
coverLeft.classList.remove('hide');
|
||||
this.navButtonLeft.classList.remove('hide');
|
||||
this.coverLeft.classList.remove('hide');
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -266,11 +268,11 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
const lastOptionObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
navButtonRight.classList.add('hide');
|
||||
coverRight.classList.add('hide');
|
||||
this.navButtonRight.classList.add('hide');
|
||||
this.coverRight.classList.add('hide');
|
||||
} else {
|
||||
navButtonRight.classList.remove('hide');
|
||||
coverRight.classList.remove('hide');
|
||||
this.navButtonRight.classList.remove('hide');
|
||||
this.coverRight.classList.remove('hide');
|
||||
}
|
||||
});
|
||||
},
|
||||
@ -278,18 +280,17 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
threshold: 0.9,
|
||||
root: this
|
||||
});
|
||||
navButtonLeft.addEventListener('click', this.scrollLeft);
|
||||
navButtonRight.addEventListener('click', this.scrollRight);
|
||||
this.navButtonLeft.addEventListener('click', this.scrollLeft);
|
||||
this.navButtonRight.addEventListener('click', this.scrollRight);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
navButtonLeft.removeEventListener('click', this.scrollLeft);
|
||||
navButtonRight.removeEventListener('click', this.scrollRight);
|
||||
this.navButtonLeft.removeEventListener('click', this.scrollLeft);
|
||||
this.navButtonRight.removeEventListener('click', this.scrollRight);
|
||||
}
|
||||
});
|
||||
|
||||
//Strip option
|
||||
const stripOption = document.createElement('template');
|
||||
stripOption.innerHTML = `
|
||||
const smChip = document.createElement('template');
|
||||
smChip.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
@ -297,7 +298,7 @@ stripOption.innerHTML = `
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.strip-option{
|
||||
.sm-chip{
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
@ -307,30 +308,30 @@ stripOption.innerHTML = `
|
||||
border-radius: var(--border-radius, 2rem);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
:host([selected]) .strip-option{
|
||||
:host([selected]) .sm-chip{
|
||||
color: var(--selected-option-color, rgba(var(--background-color,white)));
|
||||
background-color: var(--selected-background-color, var(--accent-color,teal));
|
||||
}
|
||||
:host(:focus-within){
|
||||
outline: none;
|
||||
}
|
||||
:host(:focus-within) .strip-option{
|
||||
:host(:focus-within) .sm-chip{
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
|
||||
}
|
||||
:host(:hover:not([selected])) .strip-option{
|
||||
:host(:hover:not([selected])) .sm-chip{
|
||||
background-color: rgba(var(--text-color,(17,17,17)), 0.06);
|
||||
}
|
||||
</style>
|
||||
<label class="strip-option">
|
||||
<label class="sm-chip">
|
||||
<slot></slot>
|
||||
</label>
|
||||
`;
|
||||
customElements.define('strip-option', class extends HTMLElement {
|
||||
customElements.define('sm-chip', class extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(stripOption.content.cloneNode(true));
|
||||
}).append(smChip.content.cloneNode(true));
|
||||
this._value = undefined;
|
||||
this.radioButton = this.shadowRoot.querySelector('input');
|
||||
|
||||
1
components/dist/chips.min.js
vendored
Normal file
1
components/dist/chips.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
73
components/dist/collapsed-text.js
vendored
Normal file
73
components/dist/collapsed-text.js
vendored
Normal file
@ -0,0 +1,73 @@
|
||||
const collapsedText = document.createElement('template');
|
||||
collapsedText.innerHTML = `
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.collapsed-text {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: var(--line-clamp,3);
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
:host([open]) .collapsed-text {
|
||||
-webkit-line-clamp: unset;
|
||||
}
|
||||
.toggle-button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
font-weight: 700;
|
||||
background: var(--button-background-color, #fff);
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--accent-color,teal);
|
||||
font-size: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper">
|
||||
<div class="collapsed-text"><slot></slot></div>
|
||||
<button class="toggle-button">Show more</button>
|
||||
</div>
|
||||
`;
|
||||
class CollapsedText extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(collapsedText.content.cloneNode(true));
|
||||
this.isCollapsed = true;
|
||||
this.toggleCollapsedText = this.toggleCollapsedText.bind(this);
|
||||
this.wrapper = this.shadowRoot.querySelector('.collapsed-text');
|
||||
this.toggleButton = this.shadowRoot.querySelector('.toggle-button');
|
||||
}
|
||||
toggleCollapsedText() {
|
||||
this.toggleButton.textContent = this.isCollapsed ? 'Show less' : 'Show more';
|
||||
if (this.isCollapsed) {
|
||||
this.setAttribute('open', '');
|
||||
this.wrapper.removeEventListener('click', this.toggleCollapsedText);
|
||||
} else {
|
||||
this.removeAttribute('open');
|
||||
this.wrapper.addEventListener('click', this.toggleCollapsedText);
|
||||
}
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.wrapper.addEventListener('click', this.toggleCollapsedText);
|
||||
this.toggleButton.addEventListener('click', this.toggleCollapsedText);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.wrapper.removeEventListener('click', this.toggleCollapsedText);
|
||||
this.toggleButton.removeEventListener('click', this.toggleCollapsedText);
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('collapsed-text', CollapsedText);
|
||||
35
components/dist/form.js
vendored
35
components/dist/form.js
vendored
@ -30,7 +30,7 @@ customElements.define('sm-form', class extends HTMLElement {
|
||||
|
||||
this.form = this.shadowRoot.querySelector('form');
|
||||
this.formElements
|
||||
this.requiredElements
|
||||
this._requiredElements = [];
|
||||
this.submitButton
|
||||
this.resetButton
|
||||
this.invalidFields = false;
|
||||
@ -53,11 +53,11 @@ customElements.define('sm-form', class extends HTMLElement {
|
||||
}
|
||||
_checkValidity() {
|
||||
if (!this.submitButton) return;
|
||||
this.invalidFields = this.requiredElements.filter(elem => !elem.isValid)
|
||||
this.submitButton.disabled = this.invalidFields.length;
|
||||
this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity())
|
||||
this.submitButton.disabled = this.invalidFields.length > 0;
|
||||
}
|
||||
handleKeydown(e) {
|
||||
if (e.key === 'Enter' && e.target.tagName.includes('SM-INPUT')) {
|
||||
if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) {
|
||||
if (!this.invalidFields.length) {
|
||||
if (this.submitButton) {
|
||||
this.submitButton.click()
|
||||
@ -67,7 +67,24 @@ customElements.define('sm-form', class extends HTMLElement {
|
||||
composed: true,
|
||||
}))
|
||||
} else {
|
||||
this.requiredElements.forEach(elem => { if (!elem.isValid) elem.vibrate() })
|
||||
for (const [elem, isWC] of this._requiredElements) {
|
||||
const invalid = isWC ? !elem.isValid : !elem.checkValidity()
|
||||
if (invalid) {
|
||||
(elem?.shadowRoot?.lastElementChild || elem).animate([
|
||||
{ transform: 'translateX(-1rem)' },
|
||||
{ transform: 'translateX(1rem)' },
|
||||
{ transform: 'translateX(-0.5rem)' },
|
||||
{ transform: 'translateX(0.5rem)' },
|
||||
{ transform: 'translateX(0)' },
|
||||
], {
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
});
|
||||
if (isWC) elem.focusIn()
|
||||
else elem.focus()
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -75,8 +92,12 @@ customElements.define('sm-form', class extends HTMLElement {
|
||||
this.formElements.forEach(elem => elem.reset())
|
||||
}
|
||||
elementsChanged() {
|
||||
this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
|
||||
this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
|
||||
this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
|
||||
this.formElements.forEach(elem => {
|
||||
if (elem.hasAttribute('required')) {
|
||||
this._requiredElements.push([elem, elem.tagName.includes('-')])
|
||||
}
|
||||
});
|
||||
this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
|
||||
this.resetButton = this.querySelector('[type="reset"]');
|
||||
if (this.resetButton) {
|
||||
|
||||
BIN
components/dist/form.min.js
vendored
BIN
components/dist/form.min.js
vendored
Binary file not shown.
13
components/dist/input.js
vendored
13
components/dist/input.js
vendored
@ -268,7 +268,6 @@ customElements.define('sm-input',
|
||||
this.fireEvent = this.fireEvent.bind(this);
|
||||
this.checkInput = this.checkInput.bind(this);
|
||||
this.allowOnlyNum = this.allowOnlyNum.bind(this);
|
||||
this.vibrate = this.vibrate.bind(this);
|
||||
this.handleOptionClick = this.handleOptionClick.bind(this);
|
||||
this.handleInputNavigation = this.handleInputNavigation.bind(this);
|
||||
this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this);
|
||||
@ -460,18 +459,6 @@ customElements.define('sm-input',
|
||||
}
|
||||
}
|
||||
}
|
||||
vibrate() {
|
||||
this.outerContainer.animate([
|
||||
{ transform: 'translateX(-1rem)' },
|
||||
{ transform: 'translateX(1rem)' },
|
||||
{ transform: 'translateX(-0.5rem)' },
|
||||
{ transform: 'translateX(0.5rem)' },
|
||||
{ transform: 'translateX(0)' },
|
||||
], {
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
});
|
||||
}
|
||||
handleOptionClick(e) {
|
||||
this.input.value = e.target.textContent;
|
||||
this.optionList.classList.add('hidden');
|
||||
|
||||
2
components/dist/input.min.js
vendored
2
components/dist/input.min.js
vendored
File diff suppressed because one or more lines are too long
130
components/dist/popup.js
vendored
130
components/dist/popup.js
vendored
@ -54,13 +54,12 @@ smPopup.innerHTML = `
|
||||
-webkit-transform: scale(0.9) translateY(-2rem) !important;
|
||||
transform: scale(0.9) translateY(-2rem) !important;
|
||||
}
|
||||
.background{
|
||||
.backdrop{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
background: var(--backdrop-background);
|
||||
-webkit-transition: opacity 0.3s;
|
||||
-o-transition: opacity 0.3s;
|
||||
@ -165,7 +164,7 @@ smPopup.innerHTML = `
|
||||
}
|
||||
</style>
|
||||
<div class="popup-container hide" role="dialog">
|
||||
<div part="background" class="background"></div>
|
||||
<div part="backdrop" class="backdrop"></div>
|
||||
<div part="popup" class="popup">
|
||||
<div part="popup-header" class="popup-top">
|
||||
<div class="handle"></div>
|
||||
@ -186,7 +185,6 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
|
||||
this.allowClosing = false;
|
||||
this.isOpen = false;
|
||||
this.pinned = false;
|
||||
this.offset = 0;
|
||||
this.touchStartY = 0;
|
||||
this.touchEndY = 0;
|
||||
@ -198,7 +196,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
this.mutationObserver
|
||||
|
||||
this.popupContainer = this.shadowRoot.querySelector('.popup-container');
|
||||
this.backdrop = this.shadowRoot.querySelector('.background');
|
||||
this.backdrop = this.shadowRoot.querySelector('.backdrop');
|
||||
this.dialogBox = this.shadowRoot.querySelector('.popup');
|
||||
this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
|
||||
this.popupHeader = this.shadowRoot.querySelector('.popup-top');
|
||||
@ -211,6 +209,7 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
this.handleTouchMove = this.handleTouchMove.bind(this);
|
||||
this.handleTouchEnd = this.handleTouchEnd.bind(this);
|
||||
this.detectFocus = this.detectFocus.bind(this);
|
||||
this.handleSoftDismiss = this.handleSoftDismiss.bind(this);
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
@ -260,44 +259,47 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
|
||||
show(options = {}) {
|
||||
const { pinned = false } = options;
|
||||
if (!this.isOpen) {
|
||||
const animOptions = {
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
}
|
||||
popupStack.push({
|
||||
popup: this,
|
||||
permission: pinned
|
||||
});
|
||||
if (popupStack.items.length > 1) {
|
||||
this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
|
||||
{ transform: 'none' },
|
||||
{ transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
|
||||
], animOptions)
|
||||
}
|
||||
this.popupContainer.classList.remove('hide');
|
||||
if (!this.offset)
|
||||
this.backdrop.animate([
|
||||
{ opacity: 0 },
|
||||
{ opacity: 1 },
|
||||
], animOptions)
|
||||
this.setStateOpen()
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("popupopened", {
|
||||
bubbles: true,
|
||||
detail: {
|
||||
popup: this,
|
||||
}
|
||||
})
|
||||
);
|
||||
this.pinned = pinned;
|
||||
this.isOpen = true;
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.top = `-${window.scrollY}px`;
|
||||
const elementToFocus = this.autoFocus || this.focusable[0];
|
||||
if (this.isOpen) return;
|
||||
const animOptions = {
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
}
|
||||
popupStack.push({
|
||||
popup: this,
|
||||
permission: pinned
|
||||
});
|
||||
if (popupStack.items.length > 1) {
|
||||
this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
|
||||
{ transform: 'none' },
|
||||
{ transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
|
||||
], animOptions)
|
||||
}
|
||||
this.popupContainer.classList.remove('hide');
|
||||
if (!this.offset)
|
||||
this.backdrop.animate([
|
||||
{ opacity: 0 },
|
||||
{ opacity: 1 },
|
||||
], animOptions)
|
||||
this.setStateOpen()
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("popupopened", {
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
this.pinned = pinned;
|
||||
this.isOpen = true;
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.top = `-${window.scrollY}px`;
|
||||
const elementToFocus = this.autoFocus || this.focusable[0];
|
||||
if (elementToFocus)
|
||||
elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
|
||||
if (!this.hasAttribute('open'))
|
||||
this.setAttribute('open', '');
|
||||
if (!this.hasAttribute('open')) {
|
||||
this.setAttribute('open', '');
|
||||
this.addEventListener('keydown', this.detectFocus);
|
||||
this.resizeObserver.observe(this);
|
||||
this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
|
||||
this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
|
||||
this.backdrop.addEventListener('mousedown', this.handleSoftDismiss);
|
||||
}
|
||||
}
|
||||
hide() {
|
||||
@ -343,10 +345,14 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
{ transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
|
||||
{ transform: 'none' },
|
||||
], animOptions)
|
||||
|
||||
} else {
|
||||
this.resumeScrolling();
|
||||
}
|
||||
this.resizeObserver.disconnect();
|
||||
this.mutationObserver.disconnect()
|
||||
this.removeEventListener('keydown', this.detectFocus);
|
||||
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
|
||||
this.backdrop.removeEventListener('mousedown', this.handleSoftDismiss);
|
||||
}
|
||||
|
||||
handleTouchStart(e) {
|
||||
@ -414,21 +420,29 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
this.autoFocus = this.querySelector('[autofocus]')
|
||||
}
|
||||
|
||||
handleSoftDismiss() {
|
||||
if (this.pinned) {
|
||||
this.dialogBox.animate([
|
||||
{ transform: 'translateX(-1rem)' },
|
||||
{ transform: 'translateX(1rem)' },
|
||||
{ transform: 'translateX(-0.5rem)' },
|
||||
{ transform: 'translateX(0.5rem)' },
|
||||
{ transform: 'translateX(0)' },
|
||||
], {
|
||||
duration: 300,
|
||||
easing: 'ease'
|
||||
});
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.popupBodySlot.addEventListener('slotchange', () => {
|
||||
this.forms = this.querySelectorAll('sm-form');
|
||||
this.updateFocusableList()
|
||||
});
|
||||
this.popupContainer.addEventListener('mousedown', e => {
|
||||
if (e.target === this.popupContainer && !this.pinned) {
|
||||
if (this.pinned) {
|
||||
this.setStateOpen();
|
||||
} else
|
||||
this.hide();
|
||||
}
|
||||
});
|
||||
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
this.resizeObserver = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
if (entry.contentBoxSize) {
|
||||
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
||||
@ -439,21 +453,17 @@ customElements.define('sm-popup', class extends HTMLElement {
|
||||
}
|
||||
}
|
||||
});
|
||||
resizeObserver.observe(this);
|
||||
|
||||
this.mutationObserver = new MutationObserver(entries => {
|
||||
this.updateFocusableList()
|
||||
})
|
||||
this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
|
||||
|
||||
this.addEventListener('keydown', this.detectFocus);
|
||||
this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener('keydown', this.detectFocus);
|
||||
resizeObserver.unobserve();
|
||||
this.resizeObserver.disconnect();
|
||||
this.mutationObserver.disconnect()
|
||||
this.removeEventListener('keydown', this.detectFocus);
|
||||
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
|
||||
this.backdrop.removeEventListener('mousedown', this.handleSoftDismiss);
|
||||
}
|
||||
attributeChangedCallback(name) {
|
||||
if (name === 'open') {
|
||||
|
||||
2
components/dist/popup.min.js
vendored
2
components/dist/popup.min.js
vendored
File diff suppressed because one or more lines are too long
1
components/dist/strip-select.min.js
vendored
1
components/dist/strip-select.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1205,7 +1205,7 @@
|
||||
<script>
|
||||
const mySelect = document.getElementById('my_select')
|
||||
mySelect.addEventListener('change', event => {
|
||||
console.log(event.detail.value) // logs out value of selected option
|
||||
console.log(event.target.value) // logs out value of selected option
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
@ -1238,7 +1238,7 @@
|
||||
Whenever a different options is selected by user the this event is
|
||||
fired. <br>
|
||||
You can listen to this event and access the current value with event object <span
|
||||
class="highlight">event.detail.value</span>
|
||||
class="highlight">event.target.value</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -1332,28 +1332,28 @@
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="strip_select_page" class="page hide-completely">
|
||||
<h1 class="page__title">Strip select</h1>
|
||||
<section id="chips_page" class="page hide-completely">
|
||||
<h1 class="page__title">Chips</h1>
|
||||
<p>
|
||||
This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More
|
||||
This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More
|
||||
suitable for touch devices,
|
||||
</p>
|
||||
<h2>Interactive demo</h2>
|
||||
<span>Sort by </span>
|
||||
<strip-select id="sort_by">
|
||||
<strip-option value="relevance" selected>Relevance</strip-option>
|
||||
<strip-option value="popularity">Popularity</strip-option>
|
||||
<strip-option value="price">Price</strip-option>
|
||||
<strip-option value="rating">Rating</strip-option>
|
||||
</strip-select>
|
||||
<sm-chips id="sort_by">
|
||||
<sm-chip value="relevance" selected>Relevance</sm-chip>
|
||||
<sm-chip value="popularity">Popularity</sm-chip>
|
||||
<sm-chip value="price">Price</sm-chip>
|
||||
<sm-chip value="rating">Rating</sm-chip>
|
||||
</sm-chips>
|
||||
<pre>
|
||||
<code>
|
||||
<strip-select id="sort_by">
|
||||
<strip-option value="relevance" selected>Relevance</strip-option>
|
||||
<strip-option value="popularity">Popularity</strip-option>
|
||||
<strip-option value="price">Price</strip-option>
|
||||
<strip-option value="rating">Rating</strip-option>
|
||||
</strip-select>
|
||||
<sm-chips id="sort_by">
|
||||
<sm-chip value="relevance" selected>Relevance</sm-chip>
|
||||
<sm-chip value="popularity">Popularity</sm-chip>
|
||||
<sm-chip value="price">Price</sm-chip>
|
||||
<sm-chip value="rating">Rating</sm-chip>
|
||||
</sm-chips>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>Custom attributes</h2>
|
||||
@ -1396,23 +1396,23 @@
|
||||
Whenever a different options is selected by user the this event is
|
||||
fired. <br>
|
||||
You can listen to this event and access the current value with event object <span
|
||||
class="highlight">event.detail.value</span>
|
||||
class="highlight">event.target.value</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<strip-select id="sort_by">
|
||||
<strip-option value="relevance" selected>Relevance</strip-option>
|
||||
<strip-option value="popularity">Popularity</strip-option>
|
||||
<strip-option value="price">Price</strip-option>
|
||||
<strip-option value="rating">Rating</strip-option>
|
||||
</strip-select>
|
||||
<sm-chips id="sort_by">
|
||||
<sm-chip value="relevance" selected>Relevance</sm-chip>
|
||||
<sm-chip value="popularity">Popularity</sm-chip>
|
||||
<sm-chip value="price">Price</sm-chip>
|
||||
<sm-chip value="rating">Rating</sm-chip>
|
||||
</sm-chips>
|
||||
<script>
|
||||
const sortBy = document.getElementById('sort_by')
|
||||
sortBy.addEventListener('change', event => {
|
||||
console.log(event.detail.value) // logs out value of selected option
|
||||
console.log(event.target.value) // logs out value of selected option
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
@ -1760,7 +1760,7 @@
|
||||
<script>
|
||||
const nameField = document.getElementById('name_field')
|
||||
nameField.addEventListener('change', event => {
|
||||
console.log(event.detail.value) // logs out new value set by user
|
||||
console.log(event.target.value) // logs out new value set by user
|
||||
console.log(nameField.value) // Accessing value directly with getter
|
||||
})
|
||||
</script>
|
||||
@ -1914,31 +1914,31 @@
|
||||
</sm-checkbox>
|
||||
</template>
|
||||
<script src="assets/prism.js"></script>
|
||||
<script src="dist/button.js"></script>
|
||||
<script src="dist/carousel.js"></script>
|
||||
<script src="dist/checkbox.js"></script>
|
||||
<script src="dist/copy.js"></script>
|
||||
<script src="dist/file-input.js"></script>
|
||||
<script src="dist/form.js"></script>
|
||||
<script src="dist/hamburger-menu.js"></script>
|
||||
<script src="dist/input.js"></script>
|
||||
<script src="dist/menu.js"></script>
|
||||
<script src="dist/notifications.js"></script>
|
||||
<script src="dist/popup.js"></script>
|
||||
<script src="dist/radio.js"></script>
|
||||
<script src="dist/select.js"></script>
|
||||
<script src="dist/spinner.js"></script>
|
||||
<script src="dist/strip-select.js"></script>
|
||||
<script src="dist/switch.js"></script>
|
||||
<script src="dist/tabs.js"></script>
|
||||
<script src="dist/tags-input.js"></script>
|
||||
<script src="dist/text-field.js"></script>
|
||||
<script src="dist/textarea.js"></script>
|
||||
<script src="dist/theme-toggle.js"></script>
|
||||
<script src="dist/button.min.js"></script>
|
||||
<script src="dist/carousel.min.js"></script>
|
||||
<script src="dist/checkbox.min.js"></script>
|
||||
<script src="dist/chips.min.js"></script>
|
||||
<script src="dist/copy.min.js"></script>
|
||||
<script src="dist/file-input.min.js"></script>
|
||||
<script src="dist/form.min.js"></script>
|
||||
<script src="dist/hamburger-menu.min.js"></script>
|
||||
<script src="dist/input.min.js"></script>
|
||||
<script src="dist/menu.min.js"></script>
|
||||
<script src="dist/notifications.min.js"></script>
|
||||
<script src="dist/popup.min.js"></script>
|
||||
<script src="dist/radio.min.js"></script>
|
||||
<script src="dist/select.min.js"></script>
|
||||
<script src="dist/spinner.min.js"></script>
|
||||
<script src="dist/switch.min.js"></script>
|
||||
<script src="dist/tabs.min.js"></script>
|
||||
<script src="dist/tags-input.min.js"></script>
|
||||
<script src="dist/text-field.min.js"></script>
|
||||
<script src="dist/textarea.min.js"></script>
|
||||
<script src="dist/theme-toggle.min.js"></script>
|
||||
|
||||
<script id="default_ui_library">
|
||||
const domRefs = {};
|
||||
const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
|
||||
const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
|
||||
|
||||
function getRef(elementId) {
|
||||
if (!domRefs.hasOwnProperty(elementId)) {
|
||||
@ -2256,6 +2256,10 @@
|
||||
name: 'Checkbox',
|
||||
pageId: 'checkbox_page'
|
||||
},
|
||||
{
|
||||
name: 'Chips',
|
||||
pageId: 'chips_page'
|
||||
},
|
||||
{
|
||||
name: 'Copy',
|
||||
pageId: 'copy_page'
|
||||
@ -2304,10 +2308,6 @@
|
||||
name: 'Spinner',
|
||||
pageId: 'spinner_page'
|
||||
},
|
||||
{
|
||||
name: 'Strip select',
|
||||
pageId: 'strip_select_page'
|
||||
},
|
||||
{
|
||||
name: 'Tabs',
|
||||
pageId: 'tabs_page'
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
<script>
|
||||
const mySelect = document.getElementById('my_select')
|
||||
mySelect.addEventListener('change', event => {
|
||||
console.log(event.detail.value) // logs out value of selected option
|
||||
console.log(event.target.value) // logs out value of selected option
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
@ -166,7 +166,7 @@
|
||||
<!-- Options -->
|
||||
</sm-select>
|
||||
</code>
|
||||
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
|
||||
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
|
||||
<code>
|
||||
<sm-spinner></sm-spinner>
|
||||
</code>
|
||||
@ -186,27 +186,27 @@
|
||||
</div>
|
||||
</sm-switch>
|
||||
</code>
|
||||
</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><strip-select id="sort_by"><strip-option value="relevance" selected>Relevance</strip-option><strip-option value="popularity">Popularity</strip-option><strip-option value="price">Price</strip-option><strip-option value="rating">Rating</strip-option></strip-select><pre>
|
||||
</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="chips_page" class="page hide-completely"><h1 class="page__title">Chips</h1><p>This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><sm-chips id="sort_by"><sm-chip value="relevance" selected>Relevance</sm-chip><sm-chip value="popularity">Popularity</sm-chip><sm-chip value="price">Price</sm-chip><sm-chip value="rating">Rating</sm-chip></sm-chips><pre>
|
||||
<code>
|
||||
<strip-select id="sort_by">
|
||||
<strip-option value="relevance" selected>Relevance</strip-option>
|
||||
<strip-option value="popularity">Popularity</strip-option>
|
||||
<strip-option value="price">Price</strip-option>
|
||||
<strip-option value="rating">Rating</strip-option>
|
||||
</strip-select>
|
||||
<sm-chips id="sort_by">
|
||||
<sm-chip value="relevance" selected>Relevance</sm-chip>
|
||||
<sm-chip value="popularity">Popularity</sm-chip>
|
||||
<sm-chip value="price">Price</sm-chip>
|
||||
<sm-chip value="rating">Rating</sm-chip>
|
||||
</sm-chips>
|
||||
</code>
|
||||
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
|
||||
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span></p></div></section><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<strip-select id="sort_by">
|
||||
<strip-option value="relevance" selected>Relevance</strip-option>
|
||||
<strip-option value="popularity">Popularity</strip-option>
|
||||
<strip-option value="price">Price</strip-option>
|
||||
<strip-option value="rating">Rating</strip-option>
|
||||
</strip-select>
|
||||
<sm-chips id="sort_by">
|
||||
<sm-chip value="relevance" selected>Relevance</sm-chip>
|
||||
<sm-chip value="popularity">Popularity</sm-chip>
|
||||
<sm-chip value="price">Price</sm-chip>
|
||||
<sm-chip value="rating">Rating</sm-chip>
|
||||
</sm-chips>
|
||||
<script>
|
||||
const sortBy = document.getElementById('sort_by')
|
||||
sortBy.addEventListener('change', event => {
|
||||
console.log(event.detail.value) // logs out value of selected option
|
||||
console.log(event.target.value) // logs out value of selected option
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
@ -281,7 +281,7 @@
|
||||
<script>
|
||||
const nameField = document.getElementById('name_field')
|
||||
nameField.addEventListener('change', event => {
|
||||
console.log(event.detail.value) // logs out new value set by user
|
||||
console.log(event.target.value) // logs out new value set by user
|
||||
console.log(nameField.value) // Accessing value directly with getter
|
||||
})
|
||||
</script>
|
||||
@ -326,8 +326,8 @@
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="dist/button.js"></script><script src="dist/carousel.js"></script><script src="dist/checkbox.js"></script><script src="dist/copy.js"></script><script src="dist/file-input.js"></script><script src="dist/form.js"></script><script src="dist/hamburger-menu.js"></script><script src="dist/input.js"></script><script src="dist/menu.js"></script><script src="dist/notifications.js"></script><script src="dist/popup.js"></script><script src="dist/radio.js"></script><script src="dist/select.js"></script><script src="dist/spinner.js"></script><script src="dist/strip-select.js"></script><script src="dist/switch.js"></script><script src="dist/tabs.js"></script><script src="dist/tags-input.js"></script><script src="dist/text-field.js"></script><script src="dist/textarea.js"></script><script src="dist/theme-toggle.js"></script><script id="default_ui_library">const domRefs = {};
|
||||
const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
|
||||
</pre></section></article></main><template id="nav_item_template"><li><a class="list__item interact"></a></li></template><template id="comp_checkbox_template"><sm-checkbox><span class="comp-checkbox__title"></span></sm-checkbox></template><script src="assets/prism.js"></script><script src="dist/button.min.js"></script><script src="dist/carousel.min.js"></script><script src="dist/checkbox.min.js"></script><script src="dist/chips.min.js"></script><script src="dist/copy.min.js"></script><script src="dist/file-input.min.js"></script><script src="dist/form.min.js"></script><script src="dist/hamburger-menu.min.js"></script><script src="dist/input.min.js"></script><script src="dist/menu.min.js"></script><script src="dist/notifications.min.js"></script><script src="dist/popup.min.js"></script><script src="dist/radio.min.js"></script><script src="dist/select.min.js"></script><script src="dist/spinner.min.js"></script><script src="dist/switch.min.js"></script><script src="dist/tabs.min.js"></script><script src="dist/tags-input.min.js"></script><script src="dist/text-field.min.js"></script><script src="dist/textarea.min.js"></script><script src="dist/theme-toggle.min.js"></script><script id="default_ui_library">const domRefs = {};
|
||||
const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
|
||||
|
||||
function getRef(elementId) {
|
||||
if (!domRefs.hasOwnProperty(elementId)) {
|
||||
@ -642,6 +642,10 @@
|
||||
name: 'Checkbox',
|
||||
pageId: 'checkbox_page'
|
||||
},
|
||||
{
|
||||
name: 'Chips',
|
||||
pageId: 'chips_page'
|
||||
},
|
||||
{
|
||||
name: 'Copy',
|
||||
pageId: 'copy_page'
|
||||
@ -690,10 +694,6 @@
|
||||
name: 'Spinner',
|
||||
pageId: 'spinner_page'
|
||||
},
|
||||
{
|
||||
name: 'Strip select',
|
||||
pageId: 'strip_select_page'
|
||||
},
|
||||
{
|
||||
name: 'Tabs',
|
||||
pageId: 'tabs_page'
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
<script src="dist/cube-loader.js"></script>
|
||||
<script src="dist/tags-input.js"></script>
|
||||
<script src="dist/strip-select.js"></script>
|
||||
<script src="dist/collapsed-text.js"></script>
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<style>
|
||||
div {
|
||||
@ -33,58 +34,15 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="flex">
|
||||
<sm-input placeholder="Country"
|
||||
list="Afghanistan,Albania,Algeria,Andorra,Angola,Anguilla,Antigua Barbuda,Argentina,Armenia,Aruba,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bermuda,Bhutan,Bolivia,BosniaHerzegovina,Botswana,Brazil,British Virgin Islands,Brunei,Bulgaria,Burkina Faso,Burundi,Cambodia,Cameroon,Cape Verde,Cayman Islands,Chad,Chile,China,Colombia,Congo,Cook Islands,Costa Rica,Cote D Ivoire,Croatia,Cruise Ship,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,Ecuador,Egypt,El Salvador,Equatorial Guinea,Estonia,Ethiopia,Falkland Islands,Faroe Islands,Fiji,Finland,France,French Polynesia,French West Indies,Gabon,Gambia,Georgia,Germany,Ghana,Gibraltar,Greece,Greenland,Grenada,Guam,Guatemala,Guernsey,Guinea,Guinea Bissau,Guyana,Haiti,Honduras,Hong Kong,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Isle of Man,Israel,Italy,Jamaica,Japan,Jersey,Jordan,Kazakhstan,Kenya,Kuwait,Kyrgyz Republic,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macau,Macedonia,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Mauritania,Mauritius,Mexico,Moldova,Monaco,Mongolia,Montenegro,Montserrat,Morocco,Mozambique,Namibia,Nepal,Netherlands,Netherlands Antilles,New Caledonia,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palestine,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Poland,Portugal,Puerto Rico,Qatar,Reunion,Romania,Russia,Rwanda,Saint PierreMiquelon,Samoa,San Marino,Satellite,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,South Africa,South Korea,Spain,Sri Lanka,St KittsNevis,St Lucia,St Vincent,St. Lucia,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Timor L'Este,Togo,Tonga,Trinidad Tobago,Tunisia,Turkey,Turkmenistan,Turks Caicos,Uganda,Ukraine,United Arab Emirates,United Kingdom,Uruguay,Uzbekistan,Venezuela,Vietnam,Virgin Islands (US),Yemen,Zambia,Zimbabwe">
|
||||
</sm-input>
|
||||
</div>
|
||||
<tags-input placeholder="gwdswererg"></tags-input>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="flex">
|
||||
<strip-select>
|
||||
<strip-option value="2">sdfsfd2</strip-option>
|
||||
<strip-option value="3">3sgd</strip-option>
|
||||
<strip-option value="1">1sdgsdgsgd</strip-option>
|
||||
<strip-option value="4">sdggsdgsdg4</strip-option>
|
||||
<strip-option value="5">5sdgdsgsd</strip-option>
|
||||
<strip-option value="6">6sggsdsgd</strip-option>
|
||||
<strip-option value="7">7gsdgsdgsd</strip-option>
|
||||
<strip-option value="8">8sdgsdgsdg</strip-option>
|
||||
</strip-select>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<div class="flex">
|
||||
<sm-select>
|
||||
<sm-option value="1">1</sm-option>
|
||||
<sm-option value="2">2</sm-option>
|
||||
<sm-option value="3">3</sm-option>
|
||||
<sm-option value="4">4</sm-option>
|
||||
<sm-option value="5">5</sm-option>
|
||||
<sm-option value="6">6</sm-option>
|
||||
<sm-option value="7">7</sm-option>
|
||||
<sm-option value="8">8</sm-option>
|
||||
</sm-select>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<collapsed-text>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto minima maiores autem iusto porro, odit iure
|
||||
ea eveniet enim soluta ex a nihil? Dicta ducimus dolor itaque unde sequi, reprehenderit ex aperiam dignissimos
|
||||
inventore? Totam aliquid repellendus nulla culpa nemo perspiciatis tempora. Vel obcaecati asperiores nam,
|
||||
ratione sint itaque temporibus incidunt officiis iusto cumque reiciendis ab repellendus quaerat ducimus
|
||||
quibusdam quia maxime nostrum atque ad sequi eveniet est error ipsam voluptatem. Architecto molestiae ex et
|
||||
minima praesentium quasi ea, ad enim consequuntur at nisi nostrum. Quisquam nostrum, accusamus neque, fugiat
|
||||
esse deleniti ex vitae totam asperiores odit quaerat sunt voluptates.
|
||||
</collapsed-text>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user