1176 lines
90 KiB
JavaScript
1176 lines
90 KiB
JavaScript
const smButton = document.createElement('template')
|
|
smButton.innerHTML = `
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
:host{
|
|
display: -webkit-inline-box;
|
|
display: -ms-inline-flexbox;
|
|
display: inline-flex;
|
|
width: auto;
|
|
--padding: 0.6rem 1.2rem;
|
|
--border-radius: 0.3rem;
|
|
--background: rgba(var(--text-color,(17,17,17)), 0.1);
|
|
}
|
|
:host([variant='primary']) .button{
|
|
background: var(--accent-color,teal);
|
|
color: rgba(var(--background-color,(255,255,255)), 1);
|
|
}
|
|
:host([variant='outlined']) .button{
|
|
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset;
|
|
box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset;
|
|
background: transparent;
|
|
color: var(--accent-color,teal);
|
|
}
|
|
:host([variant='no-outline']) .button{
|
|
background: inherit;
|
|
color: var(--accent-color,teal);
|
|
}
|
|
:host([disabled]){
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
.button {
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
width: 100%;
|
|
padding: var(--padding);
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
border-radius: var(--border-radius);
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
transition: box-shadow 0.3s, background-color 0.3s;
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
background-color: var(--background);
|
|
-webkit-tap-highlight-color: transparent;
|
|
outline: none;
|
|
overflow: hidden;
|
|
border: none;
|
|
color: inherit;
|
|
align-items: center;
|
|
}
|
|
:host([disabled]) .button{
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
color: rgba(var(--text-color,(17,17,17)), 1);
|
|
background-color: rgba(var(--text-color,(17,17,17)), 0.3);
|
|
}
|
|
@media (hover: hover){
|
|
:host(:not([disabled])) .button:hover,
|
|
:host(:focus-within:not([disabled])) .button{
|
|
-webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
|
|
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
|
|
}
|
|
:host([variant='outlined']:not([disabled])) .button:hover,
|
|
:host(:focus-within[variant='outlined']:not([disabled])) .button:hover{
|
|
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
|
|
box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
|
|
}
|
|
}
|
|
@media (hover: none){
|
|
:host(:not([disabled])) .button:active{
|
|
-webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
|
|
}
|
|
:host([variant='outlined']) .button:active{
|
|
-webkit-box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 0 0 1px rgba(var(--text-color,(17,17,17)), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
</style>
|
|
<div part="button" class="button">
|
|
<slot></slot>
|
|
</div>`;
|
|
customElements.define('sm-button',
|
|
class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({
|
|
mode: 'open'
|
|
}).append(smButton.content.cloneNode(true));
|
|
}
|
|
static get observedAttributes() {
|
|
return ['disabled'];
|
|
}
|
|
|
|
get disabled() {
|
|
return this.hasAttribute('disabled');
|
|
}
|
|
|
|
set disabled(value) {
|
|
if (value) {
|
|
this.setAttribute('disabled', '');
|
|
} else {
|
|
this.removeAttribute('disabled');
|
|
}
|
|
}
|
|
focusIn() {
|
|
this.focus();
|
|
}
|
|
|
|
handleKeyDown(e) {
|
|
if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.key === ' ')) {
|
|
e.preventDefault();
|
|
this.click();
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (!this.hasAttribute('disabled')) {
|
|
this.setAttribute('tabindex', '0');
|
|
}
|
|
this.setAttribute('role', 'button');
|
|
this.addEventListener('keydown', this.handleKeyDown);
|
|
}
|
|
attributeChangedCallback(name) {
|
|
if (name === 'disabled') {
|
|
if (this.hasAttribute('disabled')) {
|
|
this.removeAttribute('tabindex');
|
|
} else {
|
|
this.setAttribute('tabindex', '0');
|
|
}
|
|
this.setAttribute('aria-disabled', this.hasAttribute('disabled'));
|
|
}
|
|
}
|
|
})
|
|
|
|
const smForm = document.createElement('template');
|
|
smForm.innerHTML = `
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
:host{
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
form{
|
|
display: grid;
|
|
gap: var(--gap, 1.5rem);
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<form part="form" onsubmit="return false">
|
|
<slot></slot>
|
|
</form>
|
|
`;
|
|
|
|
customElements.define('sm-form', class extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({
|
|
mode: 'open'
|
|
}).append(smForm.content.cloneNode(true))
|
|
|
|
this.form = this.shadowRoot.querySelector('form');
|
|
this.formElements
|
|
this.requiredElements
|
|
this.submitButton
|
|
this.resetButton
|
|
this.allRequiredValid = false;
|
|
|
|
this.debounce = this.debounce.bind(this)
|
|
this._checkValidity = this._checkValidity.bind(this)
|
|
this.handleKeydown = this.handleKeydown.bind(this)
|
|
this.reset = this.reset.bind(this)
|
|
this.elementsChanged = this.elementsChanged.bind(this)
|
|
}
|
|
debounce(callback, wait) {
|
|
let timeoutId = null;
|
|
return (...args) => {
|
|
window.clearTimeout(timeoutId);
|
|
timeoutId = window.setTimeout(() => {
|
|
callback.apply(null, args);
|
|
}, wait);
|
|
};
|
|
}
|
|
_checkValidity() {
|
|
this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
|
|
if (!this.submitButton) return;
|
|
if (this.allRequiredValid) {
|
|
this.submitButton.disabled = false;
|
|
}
|
|
else {
|
|
this.submitButton.disabled = true;
|
|
}
|
|
}
|
|
handleKeydown(e) {
|
|
if (e.key === 'Enter' && !e.target.tagName.includes('TEXTAREA')) {
|
|
if (this.allRequiredValid) {
|
|
if (this.submitButton) {
|
|
this.submitButton.click()
|
|
}
|
|
this.dispatchEvent(new CustomEvent('submit', {
|
|
bubbles: true,
|
|
composed: true,
|
|
}))
|
|
}
|
|
else {
|
|
this.requiredElements.find(elem => !elem.isValid).vibrate()
|
|
}
|
|
}
|
|
}
|
|
reset() {
|
|
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.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
|
|
this.resetButton = this.querySelector('[type="reset"]');
|
|
if (this.resetButton) {
|
|
this.resetButton.addEventListener('click', this.reset);
|
|
}
|
|
this._checkValidity()
|
|
}
|
|
connectedCallback() {
|
|
const slot = this.shadowRoot.querySelector('slot')
|
|
slot.addEventListener('slotchange', this.elementsChanged)
|
|
this.addEventListener('input', this.debounce(this._checkValidity, 100));
|
|
this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
|
|
}
|
|
disconnectedCallback() {
|
|
this.removeEventListener('input', this.debounce(this._checkValidity, 100));
|
|
this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
|
|
}
|
|
})
|
|
|
|
const smInput = document.createElement('template')
|
|
smInput.innerHTML = `
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
input[type="search"]::-webkit-search-decoration,
|
|
input[type="search"]::-webkit-search-cancel-button,
|
|
input[type="search"]::-webkit-search-results-button,
|
|
input[type="search"]::-webkit-search-results-decoration { display: none; }
|
|
input[type=number] {
|
|
-moz-appearance:textfield;
|
|
}
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
margin: 0;
|
|
}
|
|
input::-ms-reveal,
|
|
input::-ms-clear {
|
|
display: none;
|
|
}
|
|
input:invalid{
|
|
outline: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
::-moz-focus-inner{
|
|
border: none;
|
|
}
|
|
:host{
|
|
display: flex;
|
|
--success-color: #00C853;
|
|
--danger-color: red;
|
|
--width: 100%;
|
|
--icon-gap: 0.5rem;
|
|
--border-radius: 0.3rem;
|
|
--background: rgba(var(--text-color, (17,17,17)), 0.06);
|
|
}
|
|
.hide{
|
|
display: none !important;
|
|
}
|
|
button{
|
|
display: flex;
|
|
border: none;
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 1rem;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
}
|
|
button:focus{
|
|
outline: var(--accent-color, teal) solid medium;
|
|
}
|
|
.icon {
|
|
height: 1.4rem;
|
|
width: 1.4rem;
|
|
fill: rgba(var(--text-color, (17,17,17)), 0.6);
|
|
}
|
|
|
|
:host(.round) .input{
|
|
border-radius: 10rem;
|
|
}
|
|
.input {
|
|
display: flex;
|
|
cursor: text;
|
|
min-width: 0;
|
|
text-align: left;
|
|
align-items: center;
|
|
position: relative;
|
|
gap: var(--icon-gap);
|
|
padding: var(--padding, 0.6rem 0.8rem);
|
|
border-radius: var(--border-radius);
|
|
transition: opacity 0.3s, box-shadow 0.2s;
|
|
background: var(--background);
|
|
width: 100%;
|
|
outline: none;
|
|
min-height: 3.5rem;
|
|
}
|
|
.input.readonly .clear{
|
|
opacity: 0 !important;
|
|
margin-right: -2rem;
|
|
pointer-events: none !important;
|
|
}
|
|
.readonly{
|
|
pointer-events: none;
|
|
}
|
|
.input:focus-within:not(.readonly){
|
|
box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset !important;
|
|
}
|
|
.disabled{
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
.label {
|
|
grid-area: 1/1/2/2;
|
|
font-size: inherit;
|
|
opacity: .7;
|
|
font-weight: 400;
|
|
top: 0;
|
|
transition: -webkit-transform 0.3s;
|
|
transition: transform 0.3s;
|
|
transition: transform 0.3s, -webkit-transform 0.3s, color .03;
|
|
transform-origin: left;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
user-select: none;
|
|
will-change: transform;
|
|
}
|
|
.outer-container{
|
|
position: relative;
|
|
width: var(--width);
|
|
}
|
|
.container{
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
position: relative;
|
|
align-items: center;
|
|
}
|
|
input{
|
|
grid-area: 1/1/2/2;
|
|
font-size: inherit;
|
|
border: none;
|
|
background: transparent;
|
|
outline: none;
|
|
color: rgba(var(--text-color, (17,17,17)), 1);
|
|
width: 100%;
|
|
caret-color: var(--accent-color, teal);
|
|
}
|
|
:host([animate]) .input:focus-within .container input,
|
|
.animate-label .container input {
|
|
-webkit-transform: translateY(0.6rem);
|
|
-ms-transform: translateY(0.6rem);
|
|
transform: translateY(0.6rem);
|
|
}
|
|
|
|
:host([animate]) .input:focus-within .label,
|
|
.animate-label .label {
|
|
-webkit-transform: translateY(-0.7em) scale(0.8);
|
|
-ms-transform: translateY(-0.7em) scale(0.8);
|
|
transform: translateY(-0.7em) scale(0.8);
|
|
opacity: 1;
|
|
color: var(--accent-color,teal)
|
|
}
|
|
:host([variant="outlined"]) .input {
|
|
box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;
|
|
background: rgba(var(--background-color, (255,255,255)), 1);
|
|
}
|
|
.animate-label:focus-within:not(.readonly) .label{
|
|
color: var(--accent-color,teal)
|
|
}
|
|
.feedback-text:not(:empty){
|
|
display: flex;
|
|
width: 100%;
|
|
text-align: left;
|
|
font-size: 0.9rem;
|
|
align-items: center;
|
|
padding: 0.8rem 0;
|
|
color: rgba(var(--text-color, (17,17,17)), 0.8);
|
|
}
|
|
.success{
|
|
color: var(--success-color);
|
|
}
|
|
.error{
|
|
color: var(--danger-color);
|
|
}
|
|
.status-icon{
|
|
margin-right: 0.2rem;
|
|
}
|
|
.status-icon--error{
|
|
fill: var(--danger-color);
|
|
}
|
|
.status-icon--success{
|
|
fill: var(--success-color);
|
|
}
|
|
@media (any-hover: hover){
|
|
.icon:hover{
|
|
background: rgba(var(--text-color, (17,17,17)), 0.1);
|
|
}
|
|
}
|
|
</style>
|
|
<div class="outer-container">
|
|
<label part="input" class="input">
|
|
<slot name="icon"></slot>
|
|
<div class="container">
|
|
<input type="text"/>
|
|
<div part="placeholder" class="label"></div>
|
|
<button class="clear hide" title="Clear">
|
|
<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="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
|
|
</button>
|
|
</div>
|
|
<slot name="right"></slot>
|
|
</label>
|
|
<p class="feedback-text"></p>
|
|
</div>
|
|
`;
|
|
customElements.define('sm-input',
|
|
class extends HTMLElement {
|
|
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({
|
|
mode: 'open'
|
|
}).append(smInput.content.cloneNode(true));
|
|
|
|
this.inputParent = this.shadowRoot.querySelector('.input');
|
|
this.input = this.shadowRoot.querySelector('input');
|
|
this.clearBtn = this.shadowRoot.querySelector('.clear');
|
|
this.label = this.shadowRoot.querySelector('.label');
|
|
this.feedbackText = this.shadowRoot.querySelector('.feedback-text');
|
|
this.outerContainer = this.shadowRoot.querySelector('.outer-container');
|
|
this._helperText = '';
|
|
this._errorText = '';
|
|
this.isRequired = false;
|
|
this.validationFunction = undefined;
|
|
this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
|
|
|
|
this.reset = this.reset.bind(this);
|
|
this.clear = this.clear.bind(this);
|
|
this.focusIn = this.focusIn.bind(this);
|
|
this.focusOut = this.focusOut.bind(this);
|
|
this.fireEvent = this.fireEvent.bind(this);
|
|
this.checkInput = this.checkInput.bind(this);
|
|
this.vibrate = this.vibrate.bind(this);
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired'];
|
|
}
|
|
|
|
get value() {
|
|
return this.input.value;
|
|
}
|
|
|
|
set value(val) {
|
|
this.input.value = val;
|
|
this.checkInput();
|
|
this.fireEvent();
|
|
}
|
|
|
|
get placeholder() {
|
|
return this.getAttribute('placeholder');
|
|
}
|
|
|
|
set placeholder(val) {
|
|
this.setAttribute('placeholder', val);
|
|
}
|
|
|
|
get type() {
|
|
return this.getAttribute('type');
|
|
}
|
|
|
|
set type(val) {
|
|
this.setAttribute('type', val);
|
|
}
|
|
|
|
get validity() {
|
|
return this.input.validity;
|
|
}
|
|
|
|
get disabled() {
|
|
return this.hasAttribute('disabled');
|
|
}
|
|
set disabled(value) {
|
|
if (value)
|
|
this.inputParent.classList.add('disabled');
|
|
else
|
|
this.inputParent.classList.remove('disabled');
|
|
}
|
|
get readOnly() {
|
|
return this.hasAttribute('readonly');
|
|
}
|
|
set readOnly(value) {
|
|
if (value) {
|
|
this.setAttribute('readonly', '');
|
|
} else {
|
|
this.removeAttribute('readonly');
|
|
}
|
|
}
|
|
set customValidation(val) {
|
|
this.validationFunction = val;
|
|
}
|
|
set errorText(val) {
|
|
this._errorText = val;
|
|
}
|
|
set helperText(val) {
|
|
this._helperText = val;
|
|
}
|
|
get isValid() {
|
|
if (this.input.value !== '') {
|
|
const _isValid = this.input.checkValidity();
|
|
let _customValid = true;
|
|
if (this.validationFunction) {
|
|
_customValid = Boolean(this.validationFunction(this.input.value));
|
|
}
|
|
if (_isValid && _customValid) {
|
|
this.feedbackText.classList.remove('error');
|
|
this.feedbackText.classList.add('success');
|
|
this.feedbackText.textContent = '';
|
|
} else {
|
|
if (this._errorText) {
|
|
this.feedbackText.classList.add('error');
|
|
this.feedbackText.classList.remove('success');
|
|
this.feedbackText.innerHTML = `
|
|
<svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
|
|
${this._errorText}
|
|
`;
|
|
}
|
|
}
|
|
return (_isValid && _customValid);
|
|
}
|
|
}
|
|
reset() {
|
|
this.value = '';
|
|
}
|
|
clear() {
|
|
this.value = '';
|
|
this.input.focus();
|
|
}
|
|
|
|
focusIn() {
|
|
this.input.focus();
|
|
}
|
|
|
|
focusOut() {
|
|
this.input.blur();
|
|
}
|
|
|
|
fireEvent() {
|
|
let event = new Event('input', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
composed: true
|
|
});
|
|
this.dispatchEvent(event);
|
|
}
|
|
|
|
checkInput(e) {
|
|
if (!this.hasAttribute('readonly')) {
|
|
if (this.input.value.trim() !== '') {
|
|
this.clearBtn.classList.remove('hide');
|
|
} else {
|
|
this.clearBtn.classList.add('hide');
|
|
}
|
|
}
|
|
if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
|
|
if (this.input.value !== '') {
|
|
if (this.animate)
|
|
this.inputParent.classList.add('animate-label');
|
|
else
|
|
this.label.classList.add('hide');
|
|
} else {
|
|
if (this.animate)
|
|
this.inputParent.classList.remove('animate-label');
|
|
else
|
|
this.label.classList.remove('hide');
|
|
this.feedbackText.textContent = '';
|
|
}
|
|
}
|
|
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'
|
|
});
|
|
}
|
|
|
|
|
|
connectedCallback() {
|
|
this.animate = this.hasAttribute('animate');
|
|
this.setAttribute('role', 'textbox');
|
|
this.input.addEventListener('input', this.checkInput);
|
|
this.clearBtn.addEventListener('click', this.clear);
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
if (oldValue !== newValue) {
|
|
if (this.reflectedAttributes.includes(name)) {
|
|
if (this.hasAttribute(name)) {
|
|
this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '');
|
|
}
|
|
else {
|
|
this.input.removeAttribute(name);
|
|
}
|
|
}
|
|
if (name === 'placeholder') {
|
|
this.label.textContent = newValue;
|
|
this.setAttribute('aria-label', newValue);
|
|
}
|
|
else if (this.hasAttribute('value')) {
|
|
this.checkInput();
|
|
}
|
|
else if (name === 'type') {
|
|
if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
|
|
this.input.setAttribute('inputmode', 'numeric');
|
|
}
|
|
}
|
|
else if (name === 'helper-text') {
|
|
this._helperText = this.getAttribute('helper-text');
|
|
}
|
|
else if (name === 'error-text') {
|
|
this._errorText = this.getAttribute('error-text');
|
|
}
|
|
else if (name === 'required') {
|
|
this.isRequired = this.hasAttribute('required');
|
|
if (this.isRequired) {
|
|
this.setAttribute('aria-required', 'true');
|
|
}
|
|
else {
|
|
this.setAttribute('aria-required', 'false');
|
|
}
|
|
}
|
|
else if (name === 'readonly') {
|
|
if (this.hasAttribute('readonly')) {
|
|
this.inputParent.classList.add('readonly');
|
|
} else {
|
|
this.inputParent.classList.remove('readonly');
|
|
}
|
|
}
|
|
else if (name === 'disabled') {
|
|
if (this.hasAttribute('disabled')) {
|
|
this.inputParent.classList.add('disabled');
|
|
}
|
|
else {
|
|
this.inputParent.classList.remove('disabled');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
disconnectedCallback() {
|
|
this.input.removeEventListener('input', this.checkInput);
|
|
this.clearBtn.removeEventListener('click', this.clear);
|
|
}
|
|
})
|
|
|
|
const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: flex;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n scrollbar-width: thin;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0 0 3rem 0;\n --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n position: fixed;\n}\n.side-nav{\n display: flex;\n flex-direction: column;\n width: 100%;\n}\n.hide{\n display: none !important;\n}\n@media screen and (max-width: 640px){\n :host{\n position: fixed;\n z-index: 10;\n }\n .side-nav{\n height: 100%;\n overflow-y: auto; \n width: calc(100% - 4rem);\n transition: transform 0.3s;\n background-color: rgba(var(--background-color), 1);\n box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n z-index: 1;\n }\n .side-nav:not(.reveal){\n transform: translateX(-100%);\n }\n .reveal{\n transform: none;\n }\n .backdrop{\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--backdrop-color);\n -webkit-transition: opacity 0.3s;\n -o-transition: opacity 0.3s;\n transition: opacity 0.3s;\n }\n}\n@media screen and (min-width: 640px){\n .backdrop{\n pointer-events: none;\n }\n}\n@media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n ::-webkit-scrollbar-thumb{\n border-radius: 1rem;\n background: rgba(var(--text-color), 0.3);\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);
|
|
const smMenu=document.createElement("template");smMenu.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n:host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.menu{\n display: -ms-grid;\n display: grid;\n place-items: center;\n height: 2rem;\n width: 2rem;\n outline: none;\n}\n.icon {\n position: absolute;\n fill: rgba(var(--text-color), 0.7);\n height: 2.4rem;\n width: 2.4rem;\n padding: 0.5rem;\n border-radius: 2rem;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n} \n.select{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n cursor: pointer;\n width: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n left: 0;\n}\n:host([align-options="right"]) .options{\n right: 0;\n}\n.options{\n padding: 0.5rem 0;\n overflow: hidden auto;\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: -webkit-max-content;\n min-width: -moz-max-content;\n min-width: max-content;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n background: rgba(var(--background-color), 1);\n border-radius: 0.3rem;\n z-index: 1;\n -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n bottom: auto;\n}\n.hide{\n display: none;\n}\n@media screen and (max-width: 640px){\n .options{\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n top: auto;\n border-radius: 0.5rem 0.5rem 0 0;\n }\n}\n@media (hover: hover){\n .menu:hover .icon{\n background: rgba(var(--text-color), 0.1); \n }\n}\n</style>\n<div class="select">\n <div class="menu" tabindex="0">\n <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="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n </div>\n <div class="options hide">\n <slot></slot> \n </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickoutSide=this.handleClickoutSide.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(n){n.target===this?"ArrowDown"===n.code?(n.preventDefault(),this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.toggle()):"ArrowUp"===n.code?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.code?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),n.target.click())}handleClickoutSide(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const n=this.shadowRoot.querySelector(".options slot");n.addEventListener("slotchange",n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),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)}});const menuOption=document.createElement("template");menuOption.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --padding: 0.6rem 1.6rem;\n}\n.option{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n min-width: 100%;\n padding: var(--padding);\n cursor: pointer;\n overflow-wrap: break-word;\n white-space: nowrap;\n outline: none;\n font-size: 1rem;\n user-select: none;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n:host(:focus){\n outline: none;\n background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n :host{\n --padding: 0.8rem 1.6rem;\n }\n .option:hover{\n background: rgba(var(--text-color), 0.1);\n }\n}\n</style>\n<div class="option">\n <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}});
|
|
const smNotifications=document.createElement("template");smNotifications.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --danger-color: red;\n --icon-height: 1.5rem;\n --icon-width: 1.5rem;\n }\n .hide{\n opacity: 0 !important;\n pointer-events: none !important;\n }\n .notification-panel{\n display: grid;\n width: 100%;\n gap: 0.5rem;\n position: fixed;\n left: 0;\n bottom: 0;\n z-index: 100;\n max-height: 100%;\n padding: 1rem;\n overflow: hidden auto;\n -ms-scroll-chaining: none;\n overscroll-behavior: contain;\n }\n .notification-panel:empty{\n display:none;\n }\n .notification{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n border-radius: 0.3rem;\n background: rgba(var(--background-color), 1);\n overflow: hidden;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n max-width: 100%;\n padding: 1rem;\n align-items: center;\n }\n .icon-container:not(:empty){\n margin-right: 0.5rem;\n height: var(--icon-height);\n width: var(--icon-width);\n }\n h4:first-letter,\n p:first-letter{\n text-transform: uppercase;\n }\n h4{\n font-weight: 400;\n }\n p{\n line-height: 1.6;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n color: rgba(var(--text-color), 0.9);\n overflow-wrap: break-word;\n overflow-wrap: break-word;\n word-wrap: break-word;\n -ms-word-break: break-all;\n word-break: break-all;\n word-break: break-word;\n -ms-hyphens: auto;\n -webkit-hyphens: auto;\n hyphens: auto;\n max-width: 100%;\n }\n .notification:last-of-type{\n margin-bottom: 0;\n }\n .icon {\n height: 100%;\n width: 100%;\n fill: rgba(var(--text-color), 0.7);\n }\n .close{\n height: 2rem;\n width: 2rem;\n border: none;\n cursor: pointer;\n margin-left: 1rem;\n border-radius: 50%;\n padding: 0.3rem;\n transition: background-color 0.3s, transform 0.3s;\n background-color: transparent;\n }\n .close:active{\n transform: scale(0.9);\n }\n @media screen and (min-width: 640px){\n .notification-panel{\n max-width: 28rem;\n width: max-content;\n }\n .notification{\n width: auto;\n border: solid 1px rgba(var(--text-color), 0.2);\n }\n }\n @media (any-hover: hover){\n ::-webkit-scrollbar{\n width: 0.5rem;\n }\n \n ::-webkit-scrollbar-thumb{\n background: rgba(var(--text-color), 0.3);\n border-radius: 1rem;\n &:hover{\n background: rgba(var(--text-color), 0.5);\n }\n }\n .close:hover{\n background-color: rgba(var(--text-color), 0.1);\n }\n }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}randString(n){let t="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o<n;o++)t+=i.charAt(Math.floor(Math.random()*i.length));return t}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.id=this.randString(8),e.classList.add("notification");let a="";return a+=`\n <div class="icon-container">${o}</div>\n <p>${n}</p>\n `,i&&(e.classList.add("pinned"),a+='\n <button class="close">\n <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="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n </button>\n '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);return this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),i.id}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}});
|
|
const themeToggle=document.createElement("template");themeToggle.innerHTML='\n <style>\n *{\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n }\n :host{\n cursor: pointer;\n --height: 2.5rem;\n --width: 2.5rem;\n }\n .theme-toggle {\n display: flex;\n position: relative;\n width: 1.4rem;\n height: 1.4rem;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n .theme-toggle::after{\n content: \'\';\n position: absolute;\n height: var(--height);\n width: var(--width);\n top: 50%;\n left: 50%;\n opacity: 0;\n border-radius: 50%;\n pointer-events: none;\n transition: transform 0.3s, opacity 0.3s;\n transform: translate(-50%, -50%) scale(1.2);\n background-color: rgba(var(--text-color), 0.12);\n }\n :host(:focus-within) .theme-toggle{\n outline: none;\n }\n :host(:focus-within) .theme-toggle::after{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n .icon {\n position: absolute;\n height: 100%;\n width: 100%;\n fill: rgba(var(--text-color), 1);\n transition: transform 0.6s;\n }\n \n .theme-switcher__checkbox {\n display: none;\n }\n :host([checked]) .moon-icon {\n transform: scale(0) rotate(90deg);\n }\n :host(:not([checked])) .sun-icon {\n transform: scale(0) rotate(-90deg);\n }\n </style>\n <label class="theme-toggle" title="Change theme" tabindex="0">\n <slot name="light-mode-icon">\n <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"\n height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z" />\n </svg>\n </slot>\n <slot name="dark-mode-icon">\n <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n <path fill="none" d="M0 0h24v24H0z" />\n <path\n d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />\n </svg>\n </slot>\n </label>\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){"Space"===e.code&&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.theme?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.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("theme","dark")):(this.daylight(),localStorage.setItem("theme","light")))}}window.customElements.define("theme-toggle",ThemeToggle);
|
|
const fileInput=document.createElement("template");fileInput.innerHTML='\n \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--background-color: 255, 255, 255;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: rgba(var(--background-color), 1);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weight);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n gap: 0.5rem;\n align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n .file-size{\n font-size: 0.8rem;\n font-weight: 400;\n color: rgba(var(--text-color), 0.8);\n }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWrapper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture","type"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture","type"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("multiple",""):this.removeAttribute("multiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWrapper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWrapper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWrapper.append(e)}handleKeyDown(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});
|
|
|
|
const smCarousel=document.createElement("template");smCarousel.innerHTML='\n<style>\n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --arrow-left: 1rem;\n --arrow-right: 1rem;\n --arrow-top: auto;\n --arrow-bottom: auto;\n --nav-icon-fill: rgba(var(--background-color), 1);\n --nav-background-color: rgba(var(--text-color), 1);\n --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n --indicator-top: auto;\n --indicator-bottom: -1.5rem;\n --indicator-height: 0.2rem;\n --indicator-width: 0.4rem;\n --indicator-border-radius: 0.4rem;\n --indicators-gap: 0.5rem;\n --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n position: absolute;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n cursor: pointer;\n min-width: 0;\n top: var(--arrow-top);\n bottom: var(--arrow-bottom);\n border: none;\n background: var(--nav-background-color);\n -webkit-box-shadow: var(--nav-box-shadow);\n box-shadow: var(--nav-box-shadow); \n -webkit-tap-highlight-color: transparent;\n transition: transform 0.3s, opacity 0.3s;\n z-index: 1;\n border-radius: 3rem;\n padding: 0.5rem;\n}\nbutton:focus{\n outline: none;\n}\nbutton:focus-visible{\n outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n transform: scale(0.9);\n}\n.carousel__button--left{\n left: var(--arrow-left);\n}\n.carousel__button--right{\n right: var(--arrow-right);\n}\n.icon {\n height: 1.5rem;\n width: 1.5rem;\n fill: var(--nav-icon-fill);\n}\n.hide{\n display: none !important;\n}\n:host([indicator]) .carousel-container{\n margin-bottom: 2rem;\n}\n.carousel-container{\n position: relative;\n display: grid;\n width: 100%;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.carousel{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n max-width: 100%;\n width: 100%;\n overflow: auto hidden;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n}\n.indicators{\n display: -ms-grid;\n display: grid;\n grid-auto-flow: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n position: absolute;\n padding: 0.5rem 0;\n top: var(--indicator-top);\n bottom: var(--indicator-bottom);\n gap: var(--indicators-gap);\n width: 100%;\n}\n.indicator{\n position: relative;\n height: var(--indicator-height);\n width: var(--indicator-width);\n background: rgba(var(--text-color), 0.3);\n border-radius: var(--indicator-border-radius);\n -webkit-transition: 0.2s;\n -o-transition: 0.2s;\n transition: 0.2s;\n cursor: pointer;\n}\n.indicator.active{\n -webkit-transform: scale(1.5);\n -ms-transform: scale(1.5);\n transform: scale(1.5);\n background: var(--active-indicator-color);\n}\nslot::slotted(*){\n scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n scroll-snap-align: end;\n}\n@media (hover: hover){\n .carousel{\n overflow: hidden;\n }\n .carousel__button{\n opacity: 0.8;\n }\n :host(:hover) .carousel__button{\n opacity: 1;\n }\n .left,.right{\n display: none;\n }\n .indicators{\n transition: gap 0.3s;\n }\n .indicators:hover{\n gap: calc(var(--indicators-gap) * 2);\n }\n .indicators:hover .indicator{\n transform: scale(2);\n }\n}\n@media (hover: none){\n ::-webkit-scrollbar-track {\n -webkit-box-shadow: none !important;\n background-color: transparent !important;\n }\n ::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n .carousel{\n overflow: auto none;\n }\n .carousel__button{\n display: none;\n }\n .left,.right{\n display: block;\n }\n}\n</style>\n<div class="carousel-container">\n <button class="carousel__button carousel__button--left hide">\n <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>\n </button>\n <div part="carousel" class="carousel">\n <slot></slot>\n </div>\n <button class="carousel__button carousel__button--right hide">\n <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="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n </button>\n <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("indicator"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".indicator")){const n=parseInt(t.target.closest(".indicator").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>i.observe(t)),this.carouselItems.length>0?(o.observe(this.carouselItems[0]),e.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),o.disconnect(),e.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,i)=>{t.append(this.createIndicator(i)),n.dataset.rank=i}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},i=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),e=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,i){n!==i&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});
|
|
const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --tab-indicator-border-radius: 0.3rem;\n }\n .tabs{\n position: relative;\n display: -ms-grid;\n display: grid;\n width: 100%;\n }\n .tab-header{\n display: -ms-grid;\n display: grid;\n grid-auto-flow: column;\n -webkit-box-pack: start;\n -ms-flex-pack: start;\n justify-content: flex-start;\n gap: 1rem;\n position: relative;\n overflow: auto hidden;\n max-width: 100%;\n scrollbar-width: 0;\n }\n .indicator{\n position: absolute;\n left: 0;\n bottom: 0;\n height: 0.15rem;\n border-radius: 1rem 1rem 0 0; \n background: var(--accent-color);\n -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n transition: width 0.3s, -webkit-transform 0.3s;\n -o-transition: transform 0.3s, width 0.3s;\n transition: transform 0.3s, width 0.3s;\n transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n pointer-events: none;\n }\n :host([variant="tab"]) .indicator{\n height: 100%;\n border-radius: var(--tab-indicator-border-radius);\n }\n :host([variant="tab"]) .tab-header{\n border-bottom: none; \n }\n .hide-completely{\n display: none;\n }\n :host([variant="tab"]) .tab-header{\n gap: 0.2rem;\n display: -ms-inline-grid;\n display: inline-grid;\n justify-self: flex-start;\n border-radius: 0.3rem;\n }\n :host([variant="tab"]) slot::slotted(.active){\n color: rgba(var(--background-color), 1);\n }\n slot::slotted(.active){\n color: var(--accent-color);\n opacity: 1;\n }\n @media (hover: none){\n .tab-header::-webkit-scrollbar-track {\n -webkit-box-shadow: none !important;\n background-color: transparent !important;\n }\n .tab-header::-webkit-scrollbar {\n height: 0;\n background-color: transparent;\n }\n } \n</style>\n<div part="tab-container" class="tabs">\n <div part="tab-header" class="tab-header">\n <slot></slot>\n <div part="indicator" class="indicator"></div>\n </div>\n</div>\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)}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"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),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<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n z-index: 1;\n }\n .tab{\n position: relative;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n white-space: nowrap;\n padding: 0.4rem 0.8rem;\n font-weight: 500;\n word-spacing: 0.1rem;\n text-align: center;\n -webkit-transition: color 0.3s;\n -o-transition: color 0.3s;\n transition: color 0.3s;\n text-transform: capitalize;\n height: 100%;\n }\n @media (hover: hover){\n :host(.active) .tab{\n opacity: 1;\n }\n .tab{\n opacity: 0.7\n }\n .tab:hover{\n opacity: 1\n }\n }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\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<style>\n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n width: 100%;\n}\n.panel-container{\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n scroll-snap-type: x mandatory;\n content-visibility: auto;\n}\n::slotted(*){\n min-width: 100%;\n scroll-snap-align: center;\n}\n@media (any-hover: none) {\n .panel-container{\n overflow-x: auto;\n scrollbar-width: none;\n }\n .container {\n overflow-y: scroll;\n }\n ::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n}\n</style>\n<div part="panel-container" class="panel-container">\n <slot>Nothing to see here.</slot>\n</div>\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.panelSlot=this.shadowRoot.querySelector("slot"),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(){this.panelSlot.addEventListener("slotchange",()=>{this.allPanels=this.panelSlot.assignedElements(),this.allPanels.forEach((n,e)=>{n.dataset.index=e,t.observe(n)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const t=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)}});
|
|
const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n *{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n } \n :host{\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --height: 1.2rem;\n --width: 1.2rem;\n --border-radius: 0.2rem;\n --border-color: rgba(var(--text-color), 0.7);\n }\n :host([disabled]) {\n opacity: 0.6;\n user-select: none;\n pointer-events: none;\n }\n .checkbox {\n position: relative;\n display:-webkit-box;\n display:-ms-flexbox;\n display:flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n \n .checkbox:focus-visible{\n outline: auto;\n }\n .checkbox:active .icon,\n .checkbox:focus-within .icon{\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n }\n \n input {\n display: none;\n }\n \n .checkmark {\n stroke-dashoffset: -65;\n stroke-dasharray: 65;\n -webkit-transition: stroke-dashoffset 0.3s; \n -o-transition: stroke-dashoffset 0.3s; \n transition: stroke-dashoffset 0.3s;\n }\n \n :host([checked]) .checkmark {\n stroke-dashoffset: 0;\n stroke: rgba(var(--background-color), 1);\n }\n :host([checked]) .icon {\n background: var(--accent-color);\n box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n } \n .icon {\n fill: none;\n height: var(--height);\n width: var(--width);\n padding: 0.1rem;\n stroke-width: 8; \n stroke: var(--border-color);\n overflow: visible;\n stroke-linecap: round;\n stroke-linejoin: round;\n -webkit-transition: background 0.3s;\n -o-transition: background 0.3s;\n transition: background 0.3s;\n border-radius: var(--border-radius);\n box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n }\n</style>\n<label class="checkbox">\n <svg class="icon" viewBox="0 0 64 64">\n <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n </svg>\n <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
|
|
const smCopy=document.createElement("template");smCopy.innerHTML='\n<style> \n*{\n padding: 0;\n margin: 0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n} \n:host{\n display: -webkit-box;\n display: flex;\n --accent-color: #4d2588;\n --text-color: 17, 17, 17;\n --background-color: 255, 255, 255;\n --padding: 0;\n --background-color: inherit;\n --button-background-color: rgba(var(--text-color), 0.2);\n}\n.copy{\n display: grid;\n width: 100%;\n gap: 0.5rem;\n padding: var(--padding);\n align-items: center;\n grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n overflow-wrap: break-word;\n word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.copy-button{\n display: inline-flex;\n justify-content: center;\n cursor: pointer;\n border: none;\n padding: 0.4rem;\n background-color: inherit;\n border-radius: var(--button-border-radius, 0.3rem);\n}\n.copy-button:active{\n background-color: var(--button-background-color);\n}\n.icon{\n height: 1.2rem;\n width: 1.2rem;\n fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n .copy:hover .copy-button{\n opacity: 1;\n }\n .copy-button{\n opacity: 0.6;\n }\n .copy-button:hover{\n background-color: var(--button-background-color);\n }\n}\n</style>\n<section class="copy">\n <p class="copy-content"></p>\n <button part="button" class="copy-button" title="copy">\n <slot name="copy-icon">\n <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="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n </slot>\n </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
|
|
|
|
class Stack {
|
|
constructor() {
|
|
this.items = [];
|
|
}
|
|
push(element) {
|
|
this.items.push(element);
|
|
}
|
|
pop() {
|
|
if (this.items.length == 0)
|
|
return "Underflow";
|
|
return this.items.pop();
|
|
}
|
|
peek() {
|
|
return this.items[this.items.length - 1];
|
|
}
|
|
}
|
|
const popupStack = new Stack();
|
|
|
|
const smPopup = document.createElement('template');
|
|
smPopup.innerHTML = `
|
|
<style>
|
|
*{
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
:host{
|
|
position: fixed;
|
|
display: -ms-grid;
|
|
display: grid;
|
|
z-index: 10;
|
|
--width: 100%;
|
|
--height: auto;
|
|
--min-width: auto;
|
|
--min-height: auto;
|
|
--backdrop-background: rgba(0, 0, 0, 0.6);
|
|
--border-radius: 0.8rem 0.8rem 0 0;
|
|
}
|
|
.popup-container{
|
|
display: -ms-grid;
|
|
display: grid;
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
place-items: center;
|
|
z-index: 10;
|
|
touch-action: none;
|
|
}
|
|
:host(.stacked) .popup{
|
|
-webkit-transform: scale(0.9) translateY(-2rem) !important;
|
|
transform: scale(0.9) translateY(-2rem) !important;
|
|
}
|
|
.background{
|
|
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;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.popup{
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
position: relative;
|
|
-ms-flex-item-align: end;
|
|
align-self: flex-end;
|
|
-webkit-box-align: start;
|
|
-ms-flex-align: start;
|
|
align-items: flex-start;
|
|
width: var(--width);
|
|
min-width: var(--min-width);
|
|
height: var(--height);
|
|
min-height: var(--min-height);
|
|
max-height: 90vh;
|
|
border-radius: var(--border-radius);
|
|
background: rgba(var(--background-color,(255,255,255)), 1);
|
|
-webkit-box-shadow: 0 -1rem 2rem #00000020;
|
|
box-shadow: 0 -1rem 2rem #00000020;
|
|
}
|
|
.container-header{
|
|
display: -webkit-box;
|
|
display: flex;
|
|
width: 100%;
|
|
touch-action: none;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
.popup-top{
|
|
display: -webkit-box;
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
.popup-body{
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
width: 100%;
|
|
padding: var(--body-padding, 1.5rem);
|
|
overflow-y: auto;
|
|
}
|
|
.hide{
|
|
display:none;
|
|
}
|
|
@media screen and (min-width: 640px){
|
|
:host{
|
|
--border-radius: 0.5rem;
|
|
}
|
|
.popup{
|
|
-ms-flex-item-align: center;
|
|
-ms-grid-row-align: center;
|
|
align-self: center;
|
|
border-radius: var(--border-radius);
|
|
height: var(--height);
|
|
-webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
|
|
box-shadow: 0 3rem 2rem -0.5rem #00000040;
|
|
}
|
|
}
|
|
@media screen and (max-width: 640px){
|
|
.popup-top{
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
.handle{
|
|
height: 0.3rem;
|
|
width: 2rem;
|
|
background: rgba(var(--text-color,(17,17,17)), .4);
|
|
border-radius: 1rem;
|
|
margin: 0.5rem 0;
|
|
}
|
|
}
|
|
@media (any-hover: hover){
|
|
::-webkit-scrollbar{
|
|
width: 0.5rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb{
|
|
background: rgba(var(--text-color,(17,17,17)), 0.3);
|
|
border-radius: 1rem;
|
|
&:hover{
|
|
background: rgba(var(--text-color,(17,17,17)), 0.5);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<div class="popup-container hide" role="dialog">
|
|
<div part="background" class="background"></div>
|
|
<div part="popup" class="popup">
|
|
<div part="popup-header" class="popup-top">
|
|
<div class="handle"></div>
|
|
<slot name="header"></slot>
|
|
</div>
|
|
<div part="popup-body" class="popup-body">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
customElements.define('sm-popup', class extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({
|
|
mode: 'open'
|
|
}).append(smPopup.content.cloneNode(true));
|
|
|
|
this.allowClosing = false;
|
|
this.isOpen = false;
|
|
this.pinned = false;
|
|
this.offset = 0;
|
|
this.touchStartY = 0;
|
|
this.touchEndY = 0;
|
|
this.touchStartTime = 0;
|
|
this.touchEndTime = 0;
|
|
this.touchEndAnimation = undefined;
|
|
this.focusable
|
|
this.autoFocus
|
|
this.mutationObserver
|
|
|
|
this.popupContainer = this.shadowRoot.querySelector('.popup-container');
|
|
this.backdrop = this.shadowRoot.querySelector('.background');
|
|
this.popup = this.shadowRoot.querySelector('.popup');
|
|
this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
|
|
this.popupHeader = this.shadowRoot.querySelector('.popup-top');
|
|
|
|
this.resumeScrolling = this.resumeScrolling.bind(this);
|
|
this.setStateOpen = this.setStateOpen.bind(this);
|
|
this.show = this.show.bind(this);
|
|
this.hide = this.hide.bind(this);
|
|
this.handleTouchStart = this.handleTouchStart.bind(this);
|
|
this.handleTouchMove = this.handleTouchMove.bind(this);
|
|
this.handleTouchEnd = this.handleTouchEnd.bind(this);
|
|
this.detectFocus = this.detectFocus.bind(this);
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['open'];
|
|
}
|
|
|
|
get open() {
|
|
return this.isOpen;
|
|
}
|
|
|
|
animateTo(element, keyframes, options) {
|
|
const anime = element.animate(keyframes, { ...options, fill: 'both' })
|
|
anime.finished.then(() => {
|
|
anime.commitStyles()
|
|
anime.cancel()
|
|
})
|
|
return anime
|
|
}
|
|
|
|
resumeScrolling() {
|
|
const scrollY = document.body.style.top;
|
|
window.scrollTo(0, parseInt(scrollY || '0') * -1);
|
|
document.body.style.overflow = '';
|
|
document.body.style.top = 'initial';
|
|
}
|
|
|
|
setStateOpen() {
|
|
if (!this.isOpen || this.offset) {
|
|
const animOptions = {
|
|
duration: 300,
|
|
easing: 'ease'
|
|
}
|
|
const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
|
|
this.animateTo(this.popup, [
|
|
{
|
|
opacity: this.offset ? 1 : 0,
|
|
transform: initialAnimation
|
|
},
|
|
{
|
|
opacity: 1,
|
|
transform: 'none'
|
|
},
|
|
], animOptions)
|
|
|
|
}
|
|
}
|
|
|
|
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];
|
|
elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
|
|
if (!this.hasAttribute('open'))
|
|
this.setAttribute('open', '');
|
|
}
|
|
}
|
|
hide() {
|
|
const animOptions = {
|
|
duration: 150,
|
|
easing: 'ease'
|
|
}
|
|
this.backdrop.animate([
|
|
{ opacity: 1 },
|
|
{ opacity: 0 }
|
|
], animOptions)
|
|
this.animateTo(this.popup, [
|
|
{
|
|
opacity: 1,
|
|
transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
|
|
},
|
|
{
|
|
opacity: 0,
|
|
transform: (window.innerWidth > 640) ? 'scale(1.1)' : 'translateY(100%)'
|
|
},
|
|
], animOptions).finished
|
|
.finally(() => {
|
|
this.popupContainer.classList.add('hide');
|
|
this.popup.style = ''
|
|
this.removeAttribute('open');
|
|
|
|
if (this.forms.length) {
|
|
this.forms.forEach(form => form.reset());
|
|
}
|
|
this.dispatchEvent(
|
|
new CustomEvent("popupclosed", {
|
|
bubbles: true,
|
|
detail: {
|
|
popup: this,
|
|
}
|
|
})
|
|
);
|
|
this.isOpen = false;
|
|
})
|
|
popupStack.pop();
|
|
if (popupStack.items.length) {
|
|
this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector('.popup'), [
|
|
{ transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
|
|
{ transform: 'none' },
|
|
], animOptions)
|
|
|
|
} else {
|
|
this.resumeScrolling();
|
|
}
|
|
}
|
|
|
|
handleTouchStart(e) {
|
|
this.offset = 0
|
|
this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true });
|
|
this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true });
|
|
this.touchStartY = e.changedTouches[0].clientY;
|
|
this.touchStartTime = e.timeStamp;
|
|
}
|
|
|
|
handleTouchMove(e) {
|
|
if (this.touchStartY < e.changedTouches[0].clientY) {
|
|
this.offset = e.changedTouches[0].clientY - this.touchStartY;
|
|
this.touchEndAnimation = window.requestAnimationFrame(() => {
|
|
this.popup.style.transform = `translateY(${this.offset}px)`;
|
|
});
|
|
}
|
|
}
|
|
|
|
handleTouchEnd(e) {
|
|
this.touchEndTime = e.timeStamp;
|
|
cancelAnimationFrame(this.touchEndAnimation);
|
|
this.touchEndY = e.changedTouches[0].clientY;
|
|
this.threshold = this.popup.getBoundingClientRect().height * 0.3;
|
|
if (this.touchEndTime - this.touchStartTime > 200) {
|
|
if (this.touchEndY - this.touchStartY > this.threshold) {
|
|
if (this.pinned) {
|
|
this.setStateOpen();
|
|
return;
|
|
} else
|
|
this.hide();
|
|
} else {
|
|
this.setStateOpen();
|
|
}
|
|
} else {
|
|
if (this.touchEndY > this.touchStartY)
|
|
if (this.pinned) {
|
|
this.setStateOpen();
|
|
return;
|
|
}
|
|
else
|
|
this.hide();
|
|
}
|
|
this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true });
|
|
this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true });
|
|
}
|
|
|
|
|
|
detectFocus(e) {
|
|
if (e.key === 'Tab') {
|
|
const lastElement = this.focusable[this.focusable.length - 1];
|
|
const firstElement = this.focusable[0];
|
|
if (e.shiftKey && document.activeElement === firstElement) {
|
|
e.preventDefault();
|
|
lastElement.tagName.includes('SM-') ? lastElement.focusIn() : lastElement.focus();
|
|
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
|
e.preventDefault();
|
|
firstElement.tagName.includes('SM-') ? firstElement.focusIn() : firstElement.focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
updateFocusableList() {
|
|
this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
|
|
this.autoFocus = this.querySelector('[autofocus]')
|
|
}
|
|
|
|
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 => {
|
|
for (let entry of entries) {
|
|
if (entry.contentBoxSize) {
|
|
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
|
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
|
this.threshold = contentBoxSize.blockSize.height * 0.3;
|
|
} else {
|
|
this.threshold = entry.contentRect.height * 0.3;
|
|
}
|
|
}
|
|
});
|
|
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.mutationObserver.disconnect()
|
|
this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
|
|
}
|
|
attributeChangedCallback(name) {
|
|
if (name === 'open') {
|
|
if (this.hasAttribute('open')) {
|
|
this.show();
|
|
}
|
|
}
|
|
}
|
|
}); |