@design.estate/dees-catalog 1.0.173 → 1.0.175

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist_bundle/bundle.js +237 -208
  2. package/dist_bundle/bundle.js.map +4 -4
  3. package/dist_ts_web/elements/dees-form.d.ts +6 -6
  4. package/dist_ts_web/elements/dees-form.js +41 -52
  5. package/dist_ts_web/elements/dees-input-checkbox.d.ts +1 -0
  6. package/dist_ts_web/elements/dees-input-checkbox.js +8 -2
  7. package/dist_ts_web/elements/dees-simple-login.d.ts +12 -0
  8. package/dist_ts_web/elements/dees-simple-login.js +68 -0
  9. package/dist_ts_web/elements/helperclasses/formcontroller.d.ts +2 -0
  10. package/dist_ts_web/elements/helperclasses/formcontroller.js +3 -0
  11. package/dist_ts_web/elements/index.d.ts +2 -1
  12. package/dist_ts_web/elements/index.js +3 -2
  13. package/dist_ts_web/pages/index.d.ts +1 -0
  14. package/dist_ts_web/pages/index.js +2 -0
  15. package/dist_ts_web/pages/mainpage.d.ts +1 -0
  16. package/dist_ts_web/pages/mainpage.js +6 -0
  17. package/dist_watch/bundle.js +74428 -0
  18. package/dist_watch/bundle.js.map +7 -0
  19. package/dist_watch/index.html +28 -0
  20. package/package.json +7 -7
  21. package/ts_web/00_commitinfo_data.ts +1 -1
  22. package/ts_web/elements/dees-form-submit.ts +1 -0
  23. package/ts_web/elements/dees-form.ts +50 -57
  24. package/ts_web/elements/dees-input-checkbox.ts +8 -1
  25. package/ts_web/elements/dees-input-fileupload.ts +17 -0
  26. package/ts_web/elements/dees-simple-login.ts +86 -0
  27. package/ts_web/elements/helperclasses/formcontroller.ts +3 -0
  28. package/ts_web/elements/index.ts +2 -1
  29. package/ts_web/pages/index.ts +1 -0
  30. package/ts_web/pages/mainpage.ts +6 -0
package/dist_watch/index.html ADDED
@@ -0,0 +1,28 @@
1
+ <!--gitzone element-->
2
+ <!-- made by Task Venture Capital GmbH -->
3
+ <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
4
+ <html lang="en">
5
+ <head>
6
+ <!--Lets set some basic meta tags-->
7
+ <meta
8
+ name="viewport"
9
+ content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
10
+ />
11
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
12
+
13
+ <!--Lets load standard fonts-->
14
+ <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
15
+ <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
16
+
17
+ <style>
18
+ body {
19
+ margin: 0px;
20
+ background: #222222;
21
+ }
22
+ </style>
23
+
24
+ <script type="module" src="/bundle.js"></script>
25
+ </head>
26
+ <body>
27
+ </body>
28
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design.estate/dees-catalog",
3
- "version": "1.0.173",
3
+ "version": "1.0.175",
4
4
  "private": false,
5
5
  "description": "website for lossless.com",
6
6
  "main": "dist_ts_web/index.js",
@@ -22,20 +22,20 @@
22
22
  "@fortawesome/free-brands-svg-icons": "^6.4.2",
23
23
  "@fortawesome/free-regular-svg-icons": "^6.4.2",
24
24
  "@fortawesome/free-solid-svg-icons": "^6.4.2",
25
- "@push.rocks/smartpromise": "^4.0.0",
26
- "@push.rocks/smartstring": "^4.0.5",
25
+ "@push.rocks/smartpromise": "^4.0.3",
26
+ "@push.rocks/smartstring": "^4.0.8",
27
27
  "@tsclass/tsclass": "^4.0.42",
28
28
  "highlight.js": "11.8.0",
29
- "pdfjs-dist": "^2.15.349"
29
+ "pdfjs-dist": "^2.16.105"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@gitzone/tsbuild": "^2.1.66",
33
33
  "@gitzone/tsbundle": "^2.0.8",
34
34
  "@gitzone/tstest": "^1.0.77",
35
35
  "@gitzone/tswatch": "^2.0.7",
36
- "@push.rocks/projectinfo": "^5.0.1",
37
- "@push.rocks/tapbundle": "^5.0.12",
38
- "@types/node": "^20.4.8"
36
+ "@push.rocks/projectinfo": "^5.0.2",
37
+ "@push.rocks/tapbundle": "^5.0.15",
38
+ "@types/node": "^20.5.1"
39
39
  },
40
40
  "files": [
41
41
  "ts/**/*",
package/ts_web/00_commitinfo_data.ts CHANGED
@@ -3,6 +3,6 @@
3
3
  */
4
4
  export const commitinfo = {
5
5
  name: '@design.estate/dees-catalog',
6
- version: '1.0.173',
6
+ version: '1.0.175',
7
7
  description: 'website for lossless.com'
8
8
  }
package/ts_web/elements/dees-form-submit.ts CHANGED
@@ -21,6 +21,7 @@ export class DeesFormSubmit extends DeesElement {
21
21
 
22
22
  @property({
23
23
  type: Boolean,
24
+ reflect: true,
24
25
  })
25
26
  public disabled = false;
26
27
 
package/ts_web/elements/dees-form.ts CHANGED
@@ -7,9 +7,15 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
7
7
  import { DeesInputRadio } from './dees-input-radio.js';
8
8
  import { DeesFormSubmit } from './dees-form-submit.js';
9
9
 
10
- export type TFormElement = Array<
11
- DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
12
- >;
10
+ // Unified set for form input types
11
+ const FORM_INPUT_TYPES = [
12
+ DeesInputCheckbox,
13
+ DeesInputText,
14
+ DeesInputQuantitySelector,
15
+ DeesInputRadio
16
+ ];
17
+
18
+ export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
13
19
 
14
20
  declare global {
15
21
  interface HTMLElementTagNameMap {
@@ -19,6 +25,7 @@ declare global {
19
25
 
20
26
  @customElement('dees-form')
21
27
  export class DeesForm extends DeesElement {
28
+
22
29
  public static demo = () => html`
23
30
  <dees-form
24
31
  style="display: block; margin:auto; max-width: 500px; padding: 20px"
@@ -31,17 +38,14 @@ export class DeesForm extends DeesElement {
31
38
  >
32
39
  <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
33
40
  <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
34
- <dees-input-checkbox
35
- .required="${true}"
36
- key="hello3"
37
- label="another text"
38
- ></dees-input-checkbox>
41
+ <dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
39
42
  <dees-form-submit>Submit</dees-form-submit>
40
43
  </dees-form>
41
44
  `;
42
45
 
43
46
  public name: string = 'myform';
44
47
  public changeSubject = new domtools.rxjs.Subject();
48
+ public readyDeferred = domtools.plugins.smartpromise.defer();
45
49
 
46
50
  public render(): TemplateResult {
47
51
  return html`
@@ -55,51 +59,38 @@ export class DeesForm extends DeesElement {
55
59
  }
56
60
 
57
61
  public async firstUpdated() {
58
- const formChildren = this.getFormChildren();
59
- this.checkRequiredStatus();
62
+ const formChildren = this.getFormElements();
63
+ this.updateRequiredStatus();
64
+
60
65
  for (const child of formChildren) {
61
- child.changeSubject.subscribe(async (elementArg: TFormElement) => {
62
- const valueObject = await this.gatherData();
66
+ child.changeSubject.subscribe(async () => {
67
+ const valueObject = await this.collectFormData();
63
68
  this.changeSubject.next(valueObject);
64
69
  console.log(valueObject);
65
- this.checkRequiredStatus();
70
+ this.updateRequiredStatus();
66
71
  });
67
72
  }
68
- await this.instrumentBehaviours();
73
+ await this.addBehaviours();
74
+ this.readyDeferred.resolve();
69
75
  }
70
76
 
71
- public getFormChildren() {
72
- const children: Array<DeesElement> = this.children as any;
73
- const formChildren: TFormElement = [];
74
-
75
- for (const child of children) {
76
- if (
77
- child instanceof DeesInputCheckbox ||
78
- child instanceof DeesInputText ||
79
- child instanceof DeesInputQuantitySelector
80
- ) {
81
- formChildren.push(child);
82
- }
83
- }
84
- return formChildren;
77
+ public getFormElements(): Array<TFormInputElement> {
78
+ return (Array.from(this.children)).filter(child =>
79
+ FORM_INPUT_TYPES.includes(child.constructor as any)
80
+ ) as unknown as TFormInputElement[];
85
81
  }
86
82
 
87
- public getSubmitButton() {
88
- const children: Array<DeesElement> = this.children as any;
89
- let submitButton: DeesFormSubmit;
90
- for (const childArg of children) {
91
- if (childArg instanceof DeesFormSubmit) {
92
- submitButton = childArg;
93
- }
94
- }
95
- return submitButton;
83
+ public getSubmitButton(): DeesFormSubmit | undefined {
84
+ return Array.from(this.children).find(child =>
85
+ child instanceof DeesFormSubmit
86
+ ) as DeesFormSubmit;
96
87
  }
97
88
 
98
- public async checkRequiredStatus() {
89
+ public async updateRequiredStatus() {
99
90
  console.log('checking the required status.');
100
91
 
101
92
  let requiredOK = true;
102
- for (const childArg of this.getFormChildren()) {
93
+ for (const childArg of this.getFormElements()) {
103
94
  if (childArg.required && !childArg.value) {
104
95
  requiredOK = false;
105
96
  }
@@ -109,8 +100,8 @@ export class DeesForm extends DeesElement {
109
100
  }
110
101
  }
111
102
 
112
- public async gatherData() {
113
- const children = this.getFormChildren();
103
+ public async collectFormData() {
104
+ const children = this.getFormElements();
114
105
  const valueObject: { [key: string]: string | number | boolean } = {};
115
106
  for (const child of children) {
116
107
  valueObject[child.key] = child.value;
@@ -119,7 +110,7 @@ export class DeesForm extends DeesElement {
119
110
  }
120
111
 
121
112
  public async gatherAndDispatch() {
122
- const valueObject = await this.gatherData();
113
+ const valueObject = await this.collectFormData();
123
114
  const formDataEvent = new CustomEvent('formData', {
124
115
  detail: {
125
116
  data: valueObject,
@@ -135,7 +126,7 @@ export class DeesForm extends DeesElement {
135
126
  visualStateArg: 'normal' | 'pending' | 'error' | 'success',
136
127
  textStateArg: string
137
128
  ) {
138
- const inputChildren = this.getFormChildren();
129
+ const inputChildren = this.getFormElements();
139
130
  const submitButton = this.getSubmitButton();
140
131
 
141
132
  switch (visualStateArg) {
@@ -172,20 +163,22 @@ export class DeesForm extends DeesElement {
172
163
  submitButton.text = textStateArg;
173
164
  }
174
165
 
175
- public async instrumentBehaviours() {
176
- const children = this.getFormChildren();
177
- for (const child of children) {
178
- child.addEventListener('keydown', (eventArg) => {
179
- if (eventArg.key === 'Enter') {
180
- const currentIndex = children.indexOf(child);
181
- if (currentIndex < children.length - 1) {
182
- children[currentIndex + 1].focus();
183
- } else {
184
- children[currentIndex].blur();
185
- this.getSubmitButton().focus();
186
- }
166
+ public async addBehaviours() {
167
+ // Use event delegation
168
+ this.addEventListener('keydown', (event: KeyboardEvent) => {
169
+ const target = event.target as DeesElement;
170
+ if (!FORM_INPUT_TYPES.includes(target.constructor as any)) return;
171
+
172
+ if (event.key === 'Enter') {
173
+ const children = this.getFormElements();
174
+ const currentIndex = children.indexOf(target as any);
175
+ if (currentIndex < children.length - 1) {
176
+ children[currentIndex + 1].focus();
177
+ } else {
178
+ target.blur();
179
+ this.getSubmitButton()?.focus();
187
180
  }
188
- });
189
- }
181
+ }
182
+ });
190
183
  }
191
184
  }
package/ts_web/elements/dees-input-checkbox.ts CHANGED
@@ -144,7 +144,7 @@ export class DeesInputCheckbox extends DeesElement {
144
144
  }
145
145
  </style>
146
146
  <div class="maincontainer" @click="${this.toggleSelected}">
147
- <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
147
+ <div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
148
148
  ${this.value
149
149
  ? html`
150
150
  <span class="checkmark">
@@ -172,4 +172,11 @@ export class DeesInputCheckbox extends DeesElement {
172
172
  );
173
173
  this.changeSubject.next(this);
174
174
  }
175
+
176
+ public focus(): void {
177
+ const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
178
+ if (checkboxDiv) {
179
+ (checkboxDiv as any).focus();
180
+ }
181
+ }
175
182
  }
package/ts_web/elements/dees-input-fileupload.ts CHANGED
@@ -155,7 +155,10 @@ export class DeesInputFileupload extends DeesElement {
155
155
  public async openFileSelector() {
156
156
  const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
157
157
  inputFile.click();
158
+ this.state = 'idle';
159
+ this.buttonText = 'Upload more files...';
158
160
  }
161
+
159
162
 
160
163
  public async updateValue(eventArg: Event) {
161
164
  const target: any = eventArg.target;
@@ -164,6 +167,20 @@ export class DeesInputFileupload extends DeesElement {
164
167
  }
165
168
 
166
169
  public firstUpdated() {
170
+ const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
171
+ inputFile.addEventListener('change', (event: Event) => {
172
+ const target = event.target as HTMLInputElement;
173
+ for (const file of Array.from(target.files)) {
174
+ this.value.push(file);
175
+ }
176
+ this.requestUpdate();
177
+ console.log(`Got ${this.value.length} files!`);
178
+ // Reset the input value to allow selecting the same file again if needed
179
+ target.value = '';
180
+ });
181
+
182
+
183
+ // lets handle drag and drop
167
184
  const dropArea = this.shadowRoot.querySelector('.uploadButton');
168
185
  const handlerFunction = (eventArg: DragEvent) => {
169
186
  eventArg.preventDefault();
package/ts_web/elements/dees-simple-login.ts ADDED
@@ -0,0 +1,86 @@
1
+ import {
2
+ customElement,
3
+ html,
4
+ DeesElement,
5
+ property,
6
+ type TemplateResult,
7
+ cssManager,
8
+ css,
9
+ unsafeCSS,
10
+ type CSSResult,
11
+ state,
12
+ } from '@design.estate/dees-element';
13
+
14
+ declare global {
15
+ interface HTMLElementTagNameMap {
16
+ 'dees-simple-login': DeesSimpleLogin;
17
+ }
18
+ }
19
+
20
+ @customElement('dees-simple-login')
21
+ export class DeesSimpleLogin extends DeesElement {
22
+ // STATIC
23
+ public static demo = () => html` <dees-simple-login></dees-simple-login> `;
24
+
25
+ // INSTANCE
26
+
27
+ @property()
28
+ public title = 'Dees Simple Login';
29
+
30
+ public static styles = [
31
+ cssManager.defaultStyles,
32
+ css`
33
+ :host {
34
+ color: ${cssManager.bdTheme('#333', '#fff')};
35
+ user-select: none;
36
+ }
37
+ .loginContainer {
38
+ display: flex;
39
+ justify-content: center; /* aligns horizontally */
40
+ align-items: center; /* aligns vertically */
41
+ height: 100%;
42
+ }
43
+ .login {
44
+ min-width: 320px;
45
+ min-height: 100px;
46
+ background: ${cssManager.bdTheme('#eeeeeb', '#111')};
47
+ box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
48
+ border-radius: 3px;
49
+ padding: 24px;
50
+ }
51
+
52
+ .header {
53
+ text-align: center;
54
+ }
55
+ `,
56
+ ];
57
+
58
+ public render(): TemplateResult {
59
+ return html`
60
+ <div class="loginContainer">
61
+ <div class="login">
62
+ <dees-form>
63
+ <div class="header">Login to ${this.title}</div>
64
+ <dees-input-text label="username" required></dees-input-text>
65
+ <dees-input-text label="password" isPasswordBool required></dees-input-text>
66
+ <dees-form-submit disabled>login</dees-form-submit>
67
+ </dees-form>
68
+ </div>
69
+ </div>
70
+ <slot></slot>
71
+ `;
72
+ }
73
+
74
+ public async firstUpdated(_changedProperties): Promise<void> {
75
+ const domtools = await this.domtoolsPromise;
76
+ super.firstUpdated(_changedProperties);
77
+ const form = this.shadowRoot.querySelector('dees-form');
78
+ await form.readyDeferred.promise;
79
+ const username = this.shadowRoot.querySelector('dees-input-text[label="username"]');
80
+ const password = this.shadowRoot.querySelector('dees-input-text[label="password"]');
81
+ const submit = this.shadowRoot.querySelector('dees-form-submit');
82
+ form.addEventListener('formData', (event: CustomEvent) => {
83
+ this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
84
+ });
85
+ }
86
+ }
package/ts_web/elements/helperclasses/formcontroller.ts ADDED
@@ -0,0 +1,3 @@
1
+ export class FormController {
2
+
3
+ }
package/ts_web/elements/index.ts CHANGED
@@ -4,8 +4,8 @@ export * from './dees-chips.js';
4
4
  export * from './dees-contextmenu.js';
5
5
  export * from './dees-dataview-codebox.js';
6
6
  export * from './dees-dataview-statusobject.js';
7
- export * from './dees-form.js';
8
7
  export * from './dees-form-submit.js';
8
+ export * from './dees-form.js';
9
9
  export * from './dees-icon.js';
10
10
  export * from './dees-input-checkbox.js';
11
11
  export * from './dees-input-dropdown.js';
@@ -15,6 +15,7 @@ export * from './dees-input-radio.js';
15
15
  export * from './dees-input-text.js';
16
16
  export * from './dees-mobilenavigation.js';
17
17
  export * from './dees-pdf.js';
18
+ export * from './dees-simple-login.js';
18
19
  export * from './dees-speechbubble.js';
19
20
  export * from './dees-spinner.js';
20
21
  export * from './dees-stepper.js';
package/ts_web/pages/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './mainpage.js';
package/ts_web/pages/mainpage.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { html } from '@design.estate/dees-element';
2
+
3
+ export const mainPage = () => html`
4
+ <dees-input-text label="my-test-label"></dees-input-text>
5
+ <dees-input-text label="my-test-label"></dees-input-text>
6
+ `;