fix(core): update
This commit is contained in:
parent
d6047f2e78
commit
f75a3714ae
@ -10,11 +10,9 @@
|
|||||||
/>
|
/>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
|
||||||
<link rel="preconnect" href="https://rsms.me/">
|
<!--Lets load standard fonts-->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
|
||||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
@ -3,6 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
export const commitinfo = {
|
export const commitinfo = {
|
||||||
name: '@designestate/dees-catalog',
|
name: '@designestate/dees-catalog',
|
||||||
version: '1.0.169',
|
version: '1.0.170',
|
||||||
description: 'website for lossless.com'
|
description: 'website for lossless.com'
|
||||||
}
|
}
|
||||||
|
@ -29,7 +29,7 @@ export class DeesFormSubmit extends DeesElement {
|
|||||||
public text: string;
|
public text: string;
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: String
|
type: String,
|
||||||
})
|
})
|
||||||
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
|
||||||
|
|
||||||
@ -41,7 +41,12 @@ export class DeesFormSubmit extends DeesElement {
|
|||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return html`
|
return html`
|
||||||
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
|
<dees-button
|
||||||
|
status=${this.status}
|
||||||
|
@click=${this.submit}
|
||||||
|
.disabled=${this.disabled}
|
||||||
|
.text=${this.text ? this.text : this.textContent}
|
||||||
|
>
|
||||||
</dees-button>
|
</dees-button>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -53,4 +58,12 @@ export class DeesFormSubmit extends DeesElement {
|
|||||||
const parentElement: DeesForm = this.parentElement as DeesForm;
|
const parentElement: DeesForm = this.parentElement as DeesForm;
|
||||||
parentElement.gatherAndDispatch();
|
parentElement.gatherAndDispatch();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async focus() {
|
||||||
|
const domtools = await this.domtoolsPromise;
|
||||||
|
if (!this.disabled) {
|
||||||
|
domtools.convenience.smartdelay.delayFor(0);
|
||||||
|
this.submit();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -54,7 +54,7 @@ export class DeesForm extends DeesElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public firstUpdated() {
|
public async firstUpdated() {
|
||||||
const formChildren = this.getFormChildren();
|
const formChildren = this.getFormChildren();
|
||||||
this.checkRequiredStatus();
|
this.checkRequiredStatus();
|
||||||
for (const child of formChildren) {
|
for (const child of formChildren) {
|
||||||
@ -65,6 +65,7 @@ export class DeesForm extends DeesElement {
|
|||||||
this.checkRequiredStatus();
|
this.checkRequiredStatus();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
await this.instrumentBehaviours();
|
||||||
}
|
}
|
||||||
|
|
||||||
public getFormChildren() {
|
public getFormChildren() {
|
||||||
@ -170,4 +171,21 @@ export class DeesForm extends DeesElement {
|
|||||||
|
|
||||||
submitButton.text = textStateArg;
|
submitButton.text = textStateArg;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async instrumentBehaviours() {
|
||||||
|
const children = this.getFormChildren();
|
||||||
|
for (const child of children) {
|
||||||
|
child.addEventListener('keydown', (eventArg) => {
|
||||||
|
if (eventArg.key === 'Enter') {
|
||||||
|
const currentIndex = children.indexOf(child);
|
||||||
|
if (currentIndex < children.length - 1) {
|
||||||
|
children[currentIndex + 1].focus();
|
||||||
|
} else {
|
||||||
|
children[currentIndex].blur();
|
||||||
|
this.getSubmitButton().focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -163,4 +163,9 @@ export class DeesInputText extends DeesElement {
|
|||||||
const textInput = this.shadowRoot.querySelector('input');
|
const textInput = this.shadowRoot.querySelector('input');
|
||||||
textInput.focus();
|
textInput.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async blur() {
|
||||||
|
const textInput = this.shadowRoot.querySelector('input');
|
||||||
|
textInput.blur();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -48,15 +48,15 @@ export class DeesStepper extends DeesElement {
|
|||||||
`,
|
`,
|
||||||
validationFunc: async (stepperArg, elementArg) => {
|
validationFunc: async (stepperArg, elementArg) => {
|
||||||
const deesForm = elementArg.querySelector('dees-form');
|
const deesForm = elementArg.querySelector('dees-form');
|
||||||
deesForm.addEventListener('formData', eventArg => {
|
deesForm.addEventListener('formData', (eventArg) => {
|
||||||
stepperArg.goNext();
|
stepperArg.goNext();
|
||||||
})
|
});
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Whats your mobile number?',
|
title: 'Whats your mobile number?',
|
||||||
content: html``,
|
content: html``,
|
||||||
}
|
},
|
||||||
] as IStep[]}
|
] as IStep[]}
|
||||||
></dees-stepper>
|
></dees-stepper>
|
||||||
`;
|
`;
|
||||||
@ -195,24 +195,26 @@ export class DeesStepper extends DeesElement {
|
|||||||
return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
|
return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
|
||||||
};
|
};
|
||||||
|
|
||||||
public firstUpdated() {
|
public async firstUpdated() {
|
||||||
|
await this.domtoolsPromise;
|
||||||
|
await this.domtools.convenience.smartdelay.delayFor(0);
|
||||||
this.selectedStep = this.steps[0];
|
this.selectedStep = this.steps[0];
|
||||||
this.setScrollStatus();
|
this.setScrollStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
public updated() {
|
public async updated() {
|
||||||
if (this.selectedStep) {
|
this.setScrollStatus();
|
||||||
this.setScrollStatus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public scroller: typeof domtools.plugins.SweetScroll.prototype;
|
public scroller: typeof domtools.plugins.SweetScroll.prototype;
|
||||||
|
|
||||||
public async setScrollStatus() {
|
public async setScrollStatus() {
|
||||||
await domtools.plugins.smartdelay.delayFor(50);
|
|
||||||
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
|
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
|
||||||
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
|
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
|
||||||
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
|
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
|
||||||
|
if (!selectedStepElement) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!stepperContainer.style.paddingTop) {
|
if (!stepperContainer.style.paddingTop) {
|
||||||
stepperContainer.style.paddingTop = `${
|
stepperContainer.style.paddingTop = `${
|
||||||
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
|
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2
|
||||||
|
Loading…
Reference in New Issue
Block a user