From a73ad40eb181aa259256efc9d2482e88decf7889 Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Mon, 23 Oct 2023 16:13:02 +0200 Subject: [PATCH] fix(core): update --- package.json | 2 + pnpm-lock.yaml | 14 ++ ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/dees-form.demo.ts | 35 ++++ ts_web/elements/dees-form.ts | 45 ++-- ts_web/elements/dees-input-fileupload.ts | 3 +- ts_web/elements/dees-input-iban.demo.ts | 3 + ts_web/elements/dees-input-iban.ts | 98 +++++++++ ts_web/elements/dees-input-phone.demo.ts | 3 + ts_web/elements/dees-input-phone.ts | 29 +++ ts_web/elements/dees-input-searchselect.ts | 0 ts_web/elements/dees-input-tags.ts | 0 ts_web/elements/dees-input-text.ts | 229 ++++++++++++++------- ts_web/elements/index.ts | 2 + 14 files changed, 363 insertions(+), 102 deletions(-) create mode 100644 ts_web/elements/dees-form.demo.ts create mode 100644 ts_web/elements/dees-input-iban.demo.ts create mode 100644 ts_web/elements/dees-input-iban.ts create mode 100644 ts_web/elements/dees-input-phone.demo.ts create mode 100644 ts_web/elements/dees-input-phone.ts create mode 100644 ts_web/elements/dees-input-searchselect.ts create mode 100644 ts_web/elements/dees-input-tags.ts diff --git a/package.json b/package.json index 44d14ac..0cc245a 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,12 @@ "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@push.rocks/smarti18n": "^1.0.3", "@push.rocks/smartpromise": "^4.0.3", "@push.rocks/smartstring": "^4.0.9", "@tsclass/tsclass": "^4.0.43", "highlight.js": "11.8.0", + "ibantools": "^4.3.5", "pdfjs-dist": "^3.11.174" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e20f6a..0d0e685 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: '@fortawesome/free-solid-svg-icons': specifier: ^6.4.2 version: 6.4.2 + '@push.rocks/smarti18n': + specifier: ^1.0.3 + version: 1.0.3 '@push.rocks/smartpromise': specifier: ^4.0.3 version: 4.0.3 @@ -38,6 +41,9 @@ dependencies: highlight.js: specifier: 11.8.0 version: 11.8.0 + ibantools: + specifier: ^4.3.5 + version: 4.3.5 pdfjs-dist: specifier: ^3.11.174 version: 3.11.174 @@ -847,6 +853,10 @@ packages: through2: 4.0.2 dev: true + /@push.rocks/smarti18n@1.0.3: + resolution: {integrity: sha512-Io5lKj8rUdRJQRnqI1Q3BkdsMlftzpk9DuHDFJb8exudQ8bvUT3yLLFFKZ9FWD/UxEyW/3C6BM5B6gvy0cUmng==} + dev: false + /@push.rocks/smartjson@5.0.10: resolution: {integrity: sha512-yuntSMGZ+XNHMrbS9RxotaD+eOgoNTcuDoWsttis+N3Mkc9DIam0pt/ER4NU8TgfMmhT/hKwQH+3DJceDzntoA==} dependencies: @@ -3791,6 +3801,10 @@ packages: ms: 2.1.3 dev: true + /ibantools@4.3.5: + resolution: {integrity: sha512-RIEM1nv01QfsazrvA7f9QswQaXPa+K70aNngGPm7ayoPiK8IDXJYZXC54+qsYOfSF4FqYEyu1o3p0ZLstyJWHg==} + dev: false + /iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 9a3b986..6988b01 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.0.225', + version: '1.0.226', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-form.demo.ts b/ts_web/elements/dees-form.demo.ts new file mode 100644 index 0000000..f9171b3 --- /dev/null +++ b/ts_web/elements/dees-form.demo.ts @@ -0,0 +1,35 @@ +import { html, domtools } from '@design.estate/dees-element'; +import type { DeesForm } from './dees-form.js'; + +export const demoFunc = () => html` + +
+ { + const form: DeesForm = eventArg.currentTarget; + form.setStatus('pending', 'authenticating...'); + await domtools.plugins.smartdelay.delayFor(1000); + form.setStatus('success', 'authenticated!'); + }} + > + + + + + + Submit + +
+`; diff --git a/ts_web/elements/dees-form.ts b/ts_web/elements/dees-form.ts index c0e8a2f..eada145 100644 --- a/ts_web/elements/dees-form.ts +++ b/ts_web/elements/dees-form.ts @@ -1,4 +1,10 @@ -import { customElement, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element'; +import { + customElement, + html, + type TemplateResult, + DeesElement, + type CSSResult, +} from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; import { DeesInputCheckbox } from './dees-input-checkbox.js'; @@ -7,17 +13,26 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js'; import { DeesInputRadio } from './dees-input-radio.js'; import { DeesFormSubmit } from './dees-form-submit.js'; import { DeesTable } from './dees-table.js'; +import { demoFunc } from './dees-form.demo.js'; +import { DeesInputIban } from './dees-input-iban.js'; // Unified set for form input types const FORM_INPUT_TYPES = [ DeesInputCheckbox, + DeesInputIban, DeesInputText, DeesInputQuantitySelector, DeesInputRadio, DeesTable, ]; -export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio | DeesTable; +export type TFormInputElement = + | DeesInputCheckbox + | DeesInputIban + | DeesInputText + | DeesInputQuantitySelector + | DeesInputRadio + | DeesTable; declare global { interface HTMLElementTagNameMap { @@ -27,23 +42,7 @@ declare global { @customElement('dees-form') export class DeesForm extends DeesElement { - - public static demo = () => html` - { - const form: DeesForm = eventArg.currentTarget; - form.setStatus('pending', 'authenticating...'); - await domtools.plugins.smartdelay.delayFor(1000); - form.setStatus('success', 'authenticated!'); - }} - > - - - - Submit - - `; + public static demo = demoFunc; public name: string = 'myform'; public changeSubject = new domtools.rxjs.Subject(); @@ -77,14 +76,14 @@ export class DeesForm extends DeesElement { } public getFormElements(): Array { - return (Array.from(this.children)).filter(child => + return Array.from(this.children).filter((child) => FORM_INPUT_TYPES.includes(child.constructor as any) ) as unknown as TFormInputElement[]; } public getSubmitButton(): DeesFormSubmit | undefined { - return Array.from(this.children).find(child => - child instanceof DeesFormSubmit + return Array.from(this.children).find( + (child) => child instanceof DeesFormSubmit ) as DeesFormSubmit; } @@ -104,7 +103,7 @@ export class DeesForm extends DeesElement { public async collectFormData() { const children = this.getFormElements(); - const valueObject: { [key: string]: string | number | boolean | any [] } = {}; + const valueObject: { [key: string]: string | number | boolean | any[] } = {}; for (const child of children) { if (!child.key) { console.log(`form element with label "${child.label}" has no key. skipping.`); diff --git a/ts_web/elements/dees-input-fileupload.ts b/ts_web/elements/dees-input-fileupload.ts index 2b6c0cc..1de88f5 100644 --- a/ts_web/elements/dees-input-fileupload.ts +++ b/ts_web/elements/dees-input-fileupload.ts @@ -8,10 +8,9 @@ import { unsafeCSS, cssManager, type CSSResult, + domtools, } from '@design.estate/dees-element'; -import * as domtools from '@design.estate/dees-domtools'; - declare global { interface HTMLElementTagNameMap { 'dees-input-fileupload': DeesInputFileupload; diff --git a/ts_web/elements/dees-input-iban.demo.ts b/ts_web/elements/dees-input-iban.demo.ts new file mode 100644 index 0000000..463a4b0 --- /dev/null +++ b/ts_web/elements/dees-input-iban.demo.ts @@ -0,0 +1,3 @@ +import { html } from '@design.estate/dees-element'; + +export const demoFunc = () => html``; \ No newline at end of file diff --git a/ts_web/elements/dees-input-iban.ts b/ts_web/elements/dees-input-iban.ts new file mode 100644 index 0000000..3b21431 --- /dev/null +++ b/ts_web/elements/dees-input-iban.ts @@ -0,0 +1,98 @@ +import { + customElement, + DeesElement, + type TemplateResult, + state, + html, + domtools, + property, +} from '@design.estate/dees-element'; + +import * as ibantools from 'ibantools'; +import { demoFunc } from './dees-input-iban.demo.js'; + +@customElement('dees-input-iban') +export class DeesInputIban extends DeesElement { + // STATIC + public static demo = demoFunc; + + // INSTANCE + @state() + enteredString: string = ''; + + @state() + enteredIbanIsValid: boolean = false; + + @property({ + type: Boolean, + }) + public disabled = false; + + @property({ + type: Boolean, + }) + public required = false; + + @property({ + type: String, + }) + public label = ''; + + @property({ + type: String, + }) + public key = ''; + + @property({ + type: String, + }) + public value = ''; + + public changeSubject = new domtools.rxjs.Subject(); + + public render(): TemplateResult { + return html` + + { + this.validateIban(eventArg); + }} + > + `; + } + + public async firstUpdated() { + const deesInputText = this.shadowRoot.querySelector('dees-input-text'); + deesInputText.disabled = this.disabled; + deesInputText.required = this.required; + deesInputText.changeSubject.subscribe(valueArg => { + this.value = valueArg.value; + this.changeSubject.next(this); + }) + } + + public async validateIban(eventArg: InputEvent): Promise { + const inputElement: HTMLInputElement = eventArg.target as HTMLInputElement; + let enteredString = inputElement?.value; + enteredString = enteredString || ''; + if (this.enteredString !== enteredString) { + this.enteredString = ibantools.friendlyFormatIBAN(enteredString) || ''; + if (inputElement) { + inputElement.value = this.enteredString; + this.value = this.enteredString; + this.changeSubject.next(this); + } + } + this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, '')); + const deesInputText = this.shadowRoot.querySelector('dees-input-text'); + deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`; + } +} diff --git a/ts_web/elements/dees-input-phone.demo.ts b/ts_web/elements/dees-input-phone.demo.ts new file mode 100644 index 0000000..64f5002 --- /dev/null +++ b/ts_web/elements/dees-input-phone.demo.ts @@ -0,0 +1,3 @@ +import { html } from '@design.estate/dees-element'; + +export const demoFunc = () => html``; diff --git a/ts_web/elements/dees-input-phone.ts b/ts_web/elements/dees-input-phone.ts new file mode 100644 index 0000000..1153042 --- /dev/null +++ b/ts_web/elements/dees-input-phone.ts @@ -0,0 +1,29 @@ +import { + customElement, + DeesElement, + type TemplateResult, + property, + html, + css, + unsafeCSS, + cssManager, + type CSSResult, +} from '@design.estate/dees-element'; +import { demoFunc } from './dees-input-phone.demo.js'; + +declare global { + interface HTMLElementTagNameMap { + 'dees-input-phone': DeesInputPhone; + } +} + +@customElement('dees-input-phone') +export class DeesInputPhone extends DeesElement { + // STATIC + public static demo = demoFunc; + + // INSTANCE + public render() { + return html`
Phone Input
`; + } +} \ No newline at end of file diff --git a/ts_web/elements/dees-input-searchselect.ts b/ts_web/elements/dees-input-searchselect.ts new file mode 100644 index 0000000..e69de29 diff --git a/ts_web/elements/dees-input-tags.ts b/ts_web/elements/dees-input-tags.ts new file mode 100644 index 0000000..e69de29 diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts index b3a3d1b..dadb75d 100644 --- a/ts_web/elements/dees-input-text.ts +++ b/ts_web/elements/dees-input-text.ts @@ -1,4 +1,13 @@ -import {customElement, DeesElement, type TemplateResult, property, html, cssManager, type CSSResult,} from '@design.estate/dees-element'; +import { + customElement, + DeesElement, + type TemplateResult, + property, + html, + cssManager, + css, + type CSSResult, +} from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; declare global { @@ -18,7 +27,7 @@ export class DeesInputText extends DeesElement { public changeSubject = new domtools.rxjs.Subject(); @property({ - type: String + type: String, }) public label: string; @@ -35,12 +44,12 @@ export class DeesInputText extends DeesElement { public value: string = ''; @property({ - type: Boolean + type: Boolean, }) public required: boolean = false; @property({ - type: Boolean + type: Boolean, }) public disabled: boolean = false; @@ -56,88 +65,156 @@ export class DeesInputText extends DeesElement { }) public showPasswordBool = false; + @property({ + type: Boolean, + reflect: true, + }) + public validationState: 'valid' | 'warn' | 'invalid'; + + @property({ + reflect: true, + }) + public validationText: string = ''; + + @property({}) + validationFunction: (value: string) => boolean; + + public static styles = [ + cssManager.defaultStyles, + css` + * { + box-sizing: border-box; + } + + :host { + position: relative; + display: grid; + margin: 8px 0px; + margin-bottom: 24px; + z-index: auto; + } + + .maincontainer { + color: ${cssManager.bdTheme('#333', '#ccc')}; + } + + .label { + font-size: 14px; + margin-bottom: 4px; + } + + input { + margin-top: 5px; + background: ${cssManager.bdTheme('#fafafa', '#222')}; + border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')}; + border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')}; + border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')}; + border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')}; + padding-left: 10px; + padding-right: 10px; + border-radius: 2px; + width: 100%; + line-height: 36px; + transition: all 0.2s; + outline: none; + font-size: 16px; + position: relative; + z-index: 2; + // see template for more + } + + input:disabled { + background: ${cssManager.bdTheme('#ffffff00', '#11111100')}; + border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')}; + color: #9b9b9e; + cursor: default; + } + + input:focus { + outline: none; + border-bottom: 1px solid #e4002b; + } + + .showPassword { + position: absolute; + bottom: 7px; + right: 10px; + border: 1px dashed #444; + border-radius: 7px; + padding: 4px 0px; + width: 40px; + } + + .showPassword:hover { + cursor: pointer; + background: ${cssManager.bdTheme('#00000010', '#ffffff10')}; + } + + .validationContainer { + text-align: center; + padding: 6px 2px 2px 2px; + margin-top: -4px; + font-size: 12px; + color: #fff; + background: #e4002b; + position: relative; + z-index: 1; + border-radius: 3px; + transition: all 0.2s; + } + `, + ]; + public render(): TemplateResult { - return html ` + return html`
${this.label ? html`
${this.label}
` : html``} - - ${this.isPasswordBool ? html` -
- -
- ` : html``} + +
+ ${this.validationText} +
+ ${this.isPasswordBool + ? html` +
+ +
+ ` + : html``}
`; } + firstUpdated() { + const input = this.shadowRoot.querySelector('input'); + input.addEventListener('input', (eventArg: InputEvent) => { + + }); + } + public async updateValue(eventArg: Event) { const target: any = eventArg.target; this.value = target.value; @@ -152,10 +229,10 @@ export class DeesInputText extends DeesElement { this.disabled = false; } - public async togglePasswordView () { + public async togglePasswordView() { const domtools = await this.domtoolsPromise; this.showPasswordBool = !this.showPasswordBool; - console.log(`this.showPasswordBool is: ${this.showPasswordBool}`) + console.log(`this.showPasswordBool is: ${this.showPasswordBool}`); } public async focus() { diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index 105f7a7..c63cf5b 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -11,6 +11,8 @@ export * from './dees-icon.js'; export * from './dees-input-checkbox.js'; export * from './dees-input-dropdown.js'; export * from './dees-input-fileupload.js'; +export * from './dees-input-iban.js'; +export * from './dees-input-phone.js'; export * from './dees-input-quantityselector.js'; export * from './dees-input-radio.js'; export * from './dees-input-text.js';