@design.estate/dees-catalog 3.42.0 → 3.43.0

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 +1568 -1473
  2. package/dist_ts_web/00_commitinfo_data.js +1 -1
  3. package/dist_ts_web/elements/00group-chart/dees-chart-area/component.d.ts +15 -1
  4. package/dist_ts_web/elements/00group-chart/dees-chart-area/component.js +1 -1
  5. package/dist_ts_web/elements/00group-dataview/dees-table/dees-table.js +7 -7
  6. package/dist_ts_web/elements/00group-form/dees-form/dees-form.d.ts +2 -1
  7. package/dist_ts_web/elements/00group-form/dees-form/dees-form.js +18 -7
  8. package/dist_ts_web/elements/00group-input/dees-input-base/dees-input-base.js +2 -19
  9. package/dist_ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.js +33 -23
  10. package/dist_ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.js +33 -23
  11. package/dist_ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.js +34 -24
  12. package/dist_ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.js +35 -25
  13. package/dist_ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.js +45 -35
  14. package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.js +81 -67
  15. package/dist_ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.js +44 -32
  16. package/dist_watch/bundle.js +1566 -1471
  17. package/dist_watch/bundle.js.map +3 -3
  18. package/package.json +5 -5
  19. package/ts_web/00_commitinfo_data.ts +1 -1
  20. package/ts_web/elements/00group-chart/dees-chart-area/component.ts +10 -0
  21. package/ts_web/elements/00group-dataview/dees-table/dees-table.ts +6 -6
  22. package/ts_web/elements/00group-form/dees-form/dees-form.ts +18 -5
  23. package/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts +1 -18
  24. package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts +52 -42
  25. package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts +32 -22
  26. package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts +33 -23
  27. package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts +34 -24
  28. package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts +48 -38
  29. package/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts +80 -66
  30. package/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.demo.ts +43 -31
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design.estate/dees-catalog",
3
- "version": "3.42.0",
3
+ "version": "3.43.0",
4
4
  "private": false,
5
5
  "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
6
6
  "main": "dist_ts_web/index.js",
@@ -34,10 +34,10 @@
34
34
  "@tiptap/extension-underline": "^2.23.0",
35
35
  "@tiptap/starter-kit": "^2.23.0",
36
36
  "@tsclass/tsclass": "^9.3.0",
37
- "apexcharts": "^5.3.6",
37
+ "apexcharts": "^5.5.0",
38
38
  "highlight.js": "11.11.1",
39
39
  "ibantools": "^4.5.1",
40
- "lucide": "^0.563.0",
40
+ "lucide": "^0.564.0",
41
41
  "monaco-editor": "0.55.1",
42
42
  "pdfjs-dist": "^4.10.38",
43
43
  "xterm": "^5.3.0",
@@ -47,9 +47,9 @@
47
47
  "@git.zone/tsbuild": "^4.1.2",
48
48
  "@git.zone/tsbundle": "^2.8.3",
49
49
  "@git.zone/tstest": "^3.1.8",
50
- "@git.zone/tswatch": "^3.0.1",
50
+ "@git.zone/tswatch": "^3.1.0",
51
51
  "@push.rocks/projectinfo": "^5.0.2",
52
- "@types/node": "^25.0.10"
52
+ "@types/node": "^25.2.3"
53
53
  },
54
54
  "files": [
55
55
  "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: '3.42.0',
6
+ version: '3.43.0',
7
7
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
8
8
  }
package/ts_web/elements/00group-chart/dees-chart-area/component.ts CHANGED
@@ -12,6 +12,16 @@ import { chartAreaStyles } from './styles.js';
12
12
  import { renderChartArea } from './template.js';
13
13
 
14
14
  import type ApexCharts from 'apexcharts';
15
+
16
+ type ApexAxisChartSeries = {
17
+ name?: string;
18
+ type?: string;
19
+ color?: string;
20
+ group?: string;
21
+ hidden?: boolean;
22
+ zIndex?: number;
23
+ data: (number | null)[] | { x: any; y: any; [key: string]: any }[] | [number, number | null][] | number[][];
24
+ }[];
15
25
  import { DeesServiceLibLoader } from '../../../services/index.js';
16
26
 
17
27
  declare global {
package/ts_web/elements/00group-dataview/dees-table/dees-table.ts CHANGED
@@ -232,7 +232,7 @@ export class DeesTable<T> extends DeesElement {
232
232
  ${directives.resolveExec(async () => {
233
233
  const resultArray: TemplateResult[] = [];
234
234
  for (const action of this.dataActions) {
235
- if (!action.type.includes('header')) continue;
235
+ if (!action.type?.includes('header')) continue;
236
236
  resultArray.push(
237
237
  html`<div
238
238
  class="headerAction"
@@ -450,7 +450,7 @@ export class DeesTable<T> extends DeesElement {
450
450
  <td
451
451
  @dblclick=${(e: Event) => {
452
452
  const dblAction = this.dataActions.find((actionArg) =>
453
- actionArg.type.includes('doubleClick')
453
+ actionArg.type?.includes('doubleClick')
454
454
  );
455
455
  if (this.editableFields.includes(editKey)) {
456
456
  this.handleCellEditing(e, itemArg, editKey);
@@ -506,7 +506,7 @@ export class DeesTable<T> extends DeesElement {
506
506
  ${directives.resolveExec(async () => {
507
507
  const resultArray: TemplateResult[] = [];
508
508
  for (const action of this.dataActions) {
509
- if (!action.type.includes('footer')) continue;
509
+ if (!action.type?.includes('footer')) continue;
510
510
  resultArray.push(
511
511
  html`<div
512
512
  class="footerAction"
@@ -540,7 +540,7 @@ export class DeesTable<T> extends DeesElement {
540
540
  super.updated(changedProperties);
541
541
  this.determineColumnWidths();
542
542
  if (this.searchable) {
543
- const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
543
+ const existing = this.dataActions.find((actionArg) => actionArg.type?.includes('header') && actionArg.name === 'Search');
544
544
  if (!existing) {
545
545
  this.dataActions.unshift({
546
546
  name: 'Search',
@@ -623,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
623
623
  const width = window.getComputedStyle(cell).width;
624
624
  if (cell.textContent.includes('Actions')) {
625
625
  const neededWidth =
626
- this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
626
+ this.dataActions.filter((actionArg) => actionArg.type?.includes('inRow')).length * 36;
627
627
  cell.style.width = `${Math.max(neededWidth, 68)}px`;
628
628
  } else {
629
629
  cell.style.width = width;
@@ -795,7 +795,7 @@ export class DeesTable<T> extends DeesElement {
795
795
  getActionsForType(typeArg: ITableAction['type'][0]) {
796
796
  const actions: ITableAction[] = [];
797
797
  for (const action of this.dataActions) {
798
- if (!action.type.includes(typeArg)) continue;
798
+ if (!action.type?.includes(typeArg)) continue;
799
799
  actions.push(action);
800
800
  }
801
801
  return actions;
package/ts_web/elements/00group-form/dees-form/dees-form.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
2
  customElement,
3
3
  html,
4
+ css,
4
5
  type TemplateResult,
5
6
  DeesElement,
6
7
  type CSSResult,
@@ -81,13 +82,25 @@ export class DeesForm extends DeesElement {
81
82
  @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
82
83
  accessor horizontalLayout: boolean = false;
83
84
 
85
+ public static styles = [
86
+ css`
87
+ :host {
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 16px;
91
+ }
92
+
93
+ :host([horizontal-layout]) {
94
+ flex-direction: row;
95
+ flex-wrap: wrap;
96
+ align-items: flex-start;
97
+ gap: 16px;
98
+ }
99
+ `,
100
+ ];
101
+
84
102
  public render(): TemplateResult {
85
103
  return html`
86
- <style>
87
- :host {
88
- display: contents;
89
- }
90
- </style>
91
104
  <slot></slot>
92
105
  `;
93
106
  }
package/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts CHANGED
@@ -54,37 +54,20 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
54
54
  /* CSS Variables for consistent spacing */
55
55
  :host {
56
56
  --dees-input-spacing-unit: 8px;
57
- --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
58
- --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
59
57
  --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
60
58
  }
61
59
 
62
- /* Default vertical stacking mode (for forms) */
60
+ /* Default block display with no margins - spacing is container-driven */
63
61
  :host {
64
62
  display: block;
65
63
  margin: 0;
66
- margin-bottom: var(--dees-input-vertical-gap);
67
- }
68
-
69
- /* Last child in container should have no bottom margin */
70
- :host(:last-child) {
71
- margin-bottom: 0;
72
64
  }
73
65
 
74
66
  /* Horizontal layout mode - activated by attribute */
75
67
  :host([layout-mode="horizontal"]) {
76
68
  display: inline-block;
77
- margin: 0;
78
- margin-right: var(--dees-input-horizontal-gap);
79
- margin-bottom: 0;
80
69
  }
81
70
 
82
- :host([layout-mode="horizontal"]:last-child) {
83
- margin-right: 0;
84
- }
85
-
86
- /* Auto mode - inherit from parent dees-form if present */
87
-
88
71
  /* Label position variations */
89
72
  :host([label-position="left"]) .input-wrapper {
90
73
  display: grid;
package/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts CHANGED
@@ -31,6 +31,12 @@ export const demoFunc = () => html`
31
31
  flex-wrap: wrap;
32
32
  }
33
33
 
34
+ .input-group {
35
+ display: flex;
36
+ flex-direction: column;
37
+ gap: 16px;
38
+ }
39
+
34
40
  .spacer {
35
41
  height: 200px;
36
42
  display: flex;
@@ -63,30 +69,32 @@ export const demoFunc = () => html`
63
69
  }
64
70
  }}>
65
71
  <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
66
- <dees-input-dropdown
67
- .label=${'Select Country'}
68
- .options=${[
69
- { option: 'United States', key: 'us' },
70
- { option: 'Canada', key: 'ca' },
71
- { option: 'Germany', key: 'de' },
72
- { option: 'France', key: 'fr' },
73
- { option: 'United Kingdom', key: 'uk' },
74
- { option: 'Australia', key: 'au' },
75
- { option: 'Japan', key: 'jp' },
76
- { option: 'Brazil', key: 'br' }
77
- ]}
78
- .selectedOption=${{ option: 'United States', key: 'us' }}
79
- ></dees-input-dropdown>
80
-
81
- <dees-input-dropdown
82
- .label=${'Select Role'}
83
- .options=${[
84
- { option: 'Administrator', key: 'admin' },
85
- { option: 'Editor', key: 'editor' },
86
- { option: 'Viewer', key: 'viewer' },
87
- { option: 'Guest', key: 'guest' }
88
- ]}
89
- ></dees-input-dropdown>
72
+ <div class="input-group">
73
+ <dees-input-dropdown
74
+ .label=${'Select Country'}
75
+ .options=${[
76
+ { option: 'United States', key: 'us' },
77
+ { option: 'Canada', key: 'ca' },
78
+ { option: 'Germany', key: 'de' },
79
+ { option: 'France', key: 'fr' },
80
+ { option: 'United Kingdom', key: 'uk' },
81
+ { option: 'Australia', key: 'au' },
82
+ { option: 'Japan', key: 'jp' },
83
+ { option: 'Brazil', key: 'br' }
84
+ ]}
85
+ .selectedOption=${{ option: 'United States', key: 'us' }}
86
+ ></dees-input-dropdown>
87
+
88
+ <dees-input-dropdown
89
+ .label=${'Select Role'}
90
+ .options=${[
91
+ { option: 'Administrator', key: 'admin' },
92
+ { option: 'Editor', key: 'editor' },
93
+ { option: 'Viewer', key: 'viewer' },
94
+ { option: 'Guest', key: 'guest' }
95
+ ]}
96
+ ></dees-input-dropdown>
97
+ </div>
90
98
  </dees-panel>
91
99
  </dees-demowrapper>
92
100
 
@@ -176,24 +184,26 @@ export const demoFunc = () => html`
176
184
  }
177
185
  }}>
178
186
  <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
179
- <dees-input-dropdown
180
- .label=${'Required Field'}
181
- .required=${true}
182
- .options=${[
183
- { option: 'Option A', key: 'a' },
184
- { option: 'Option B', key: 'b' },
185
- { option: 'Option C', key: 'c' }
186
- ]}
187
- ></dees-input-dropdown>
188
-
189
- <dees-input-dropdown
190
- .label=${'Disabled Dropdown'}
191
- .disabled=${true}
192
- .options=${[
193
- { option: 'Cannot Select', key: 'disabled' }
194
- ]}
195
- .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
196
- ></dees-input-dropdown>
187
+ <div class="input-group">
188
+ <dees-input-dropdown
189
+ .label=${'Required Field'}
190
+ .required=${true}
191
+ .options=${[
192
+ { option: 'Option A', key: 'a' },
193
+ { option: 'Option B', key: 'b' },
194
+ { option: 'Option C', key: 'c' }
195
+ ]}
196
+ ></dees-input-dropdown>
197
+
198
+ <dees-input-dropdown
199
+ .label=${'Disabled Dropdown'}
200
+ .disabled=${true}
201
+ .options=${[
202
+ { option: 'Cannot Select', key: 'disabled' }
203
+ ]}
204
+ .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
205
+ ></dees-input-dropdown>
206
+ </div>
197
207
  </dees-panel>
198
208
  </dees-demowrapper>
199
209
 
package/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.demo.ts CHANGED
@@ -13,6 +13,12 @@ export const demoFunc = () => html`
13
13
  margin: 0 auto;
14
14
  }
15
15
 
16
+ .input-group {
17
+ display: flex;
18
+ flex-direction: column;
19
+ gap: 16px;
20
+ }
21
+
16
22
  .payment-group {
17
23
  display: flex;
18
24
  align-items: center;
@@ -24,16 +30,18 @@ export const demoFunc = () => html`
24
30
 
25
31
  <div class="demo-container">
26
32
  <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
27
- <dees-input-iban
28
- .label=${'Bank Account IBAN'}
29
- .description=${'Enter your International Bank Account Number'}
30
- ></dees-input-iban>
31
-
32
- <dees-input-iban
33
- .label=${'Verified IBAN'}
34
- .description=${'This IBAN has been verified'}
35
- .value=${'DE89370400440532013000'}
36
- ></dees-input-iban>
33
+ <div class="input-group">
34
+ <dees-input-iban
35
+ .label=${'Bank Account IBAN'}
36
+ .description=${'Enter your International Bank Account Number'}
37
+ ></dees-input-iban>
38
+
39
+ <dees-input-iban
40
+ .label=${'Verified IBAN'}
41
+ .description=${'This IBAN has been verified'}
42
+ .value=${'DE89370400440532013000'}
43
+ ></dees-input-iban>
44
+ </div>
37
45
  </dees-panel>
38
46
 
39
47
  <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
@@ -53,18 +61,20 @@ export const demoFunc = () => html`
53
61
  </dees-panel>
54
62
 
55
63
  <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
56
- <dees-input-iban
57
- .label=${'Payment Account'}
58
- .description=${'Required for processing payments'}
59
- .required=${true}
60
- ></dees-input-iban>
61
-
62
- <dees-input-iban
63
- .label=${'Locked IBAN'}
64
- .description=${'This IBAN cannot be changed'}
65
- .value=${'FR1420041010050500013M02606'}
66
- .disabled=${true}
67
- ></dees-input-iban>
64
+ <div class="input-group">
65
+ <dees-input-iban
66
+ .label=${'Payment Account'}
67
+ .description=${'Required for processing payments'}
68
+ .required=${true}
69
+ ></dees-input-iban>
70
+
71
+ <dees-input-iban
72
+ .label=${'Locked IBAN'}
73
+ .description=${'This IBAN cannot be changed'}
74
+ .value=${'FR1420041010050500013M02606'}
75
+ .disabled=${true}
76
+ ></dees-input-iban>
77
+ </div>
68
78
  </dees-panel>
69
79
 
70
80
  <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>
package/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.demo.ts CHANGED
@@ -13,6 +13,12 @@ export const demoFunc = () => html`
13
13
  margin: 0 auto;
14
14
  }
15
15
 
16
+ .input-group {
17
+ display: flex;
18
+ flex-direction: column;
19
+ gap: 16px;
20
+ }
21
+
16
22
  .horizontal-group {
17
23
  display: flex;
18
24
  align-items: center;
@@ -24,18 +30,20 @@ export const demoFunc = () => html`
24
30
 
25
31
  <div class="demo-container">
26
32
  <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
27
- <dees-input-phone
28
- .label=${'Phone Number'}
29
- .description=${'Enter your phone number with country code'}
30
- .value=${'5551234567'}
31
- ></dees-input-phone>
32
-
33
- <dees-input-phone
34
- .label=${'Contact Phone'}
35
- .description=${'Required for account verification'}
36
- .required=${true}
37
- .placeholder=${'+1 (555) 000-0000'}
38
- ></dees-input-phone>
33
+ <div class="input-group">
34
+ <dees-input-phone
35
+ .label=${'Phone Number'}
36
+ .description=${'Enter your phone number with country code'}
37
+ .value=${'5551234567'}
38
+ ></dees-input-phone>
39
+
40
+ <dees-input-phone
41
+ .label=${'Contact Phone'}
42
+ .description=${'Required for account verification'}
43
+ .required=${true}
44
+ .placeholder=${'+1 (555) 000-0000'}
45
+ ></dees-input-phone>
46
+ </div>
39
47
  </dees-panel>
40
48
 
41
49
  <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
@@ -55,17 +63,19 @@ export const demoFunc = () => html`
55
63
  </dees-panel>
56
64
 
57
65
  <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
58
- <dees-input-phone
59
- .label=${'International Contact'}
60
- .description=${'Automatically formats international numbers'}
61
- .value=${'441234567890'}
62
- ></dees-input-phone>
63
-
64
- <dees-input-phone
65
- .label=${'Emergency Contact'}
66
- .value=${'911'}
67
- .disabled=${true}
68
- ></dees-input-phone>
66
+ <div class="input-group">
67
+ <dees-input-phone
68
+ .label=${'International Contact'}
69
+ .description=${'Automatically formats international numbers'}
70
+ .value=${'441234567890'}
71
+ ></dees-input-phone>
72
+
73
+ <dees-input-phone
74
+ .label=${'Emergency Contact'}
75
+ .value=${'911'}
76
+ .disabled=${true}
77
+ ></dees-input-phone>
78
+ </div>
69
79
  </dees-panel>
70
80
 
71
81
  <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>
package/ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts CHANGED
@@ -14,6 +14,12 @@ export const demoFunc = () => html`
14
14
  margin: 0 auto;
15
15
  }
16
16
 
17
+ .input-group {
18
+ display: flex;
19
+ flex-direction: column;
20
+ gap: 16px;
21
+ }
22
+
17
23
  .shopping-grid {
18
24
  display: grid;
19
25
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -60,17 +66,19 @@ export const demoFunc = () => html`
60
66
 
61
67
  <div class="demo-container">
62
68
  <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
63
- <dees-input-quantityselector
64
- .label=${'Quantity'}
65
- .description=${'Select the desired quantity'}
66
- .value=${1}
67
- ></dees-input-quantityselector>
68
-
69
- <dees-input-quantityselector
70
- .label=${'Items in Cart'}
71
- .description=${'Adjust the quantity of items'}
72
- .value=${3}
73
- ></dees-input-quantityselector>
69
+ <div class="input-group">
70
+ <dees-input-quantityselector
71
+ .label=${'Quantity'}
72
+ .description=${'Select the desired quantity'}
73
+ .value=${1}
74
+ ></dees-input-quantityselector>
75
+
76
+ <dees-input-quantityselector
77
+ .label=${'Items in Cart'}
78
+ .description=${'Adjust the quantity of items'}
79
+ .value=${3}
80
+ ></dees-input-quantityselector>
81
+ </div>
74
82
  </dees-panel>
75
83
 
76
84
  <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -169,19 +177,21 @@ export const demoFunc = () => html`
169
177
  </dees-panel>
170
178
 
171
179
  <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
172
- <dees-input-quantityselector
173
- .label=${'Number of Licenses'}
174
- .description=${'Select how many licenses you need'}
175
- .required=${true}
176
- .value=${1}
177
- ></dees-input-quantityselector>
178
-
179
- <dees-input-quantityselector
180
- .label=${'Fixed Quantity'}
181
- .description=${'This quantity cannot be changed'}
182
- .disabled=${true}
183
- .value=${5}
184
- ></dees-input-quantityselector>
180
+ <div class="input-group">
181
+ <dees-input-quantityselector
182
+ .label=${'Number of Licenses'}
183
+ .description=${'Select how many licenses you need'}
184
+ .required=${true}
185
+ .value=${1}
186
+ ></dees-input-quantityselector>
187
+
188
+ <dees-input-quantityselector
189
+ .label=${'Fixed Quantity'}
190
+ .description=${'This quantity cannot be changed'}
191
+ .disabled=${true}
192
+ .value=${5}
193
+ ></dees-input-quantityselector>
194
+ </div>
185
195
  </dees-panel>
186
196
 
187
197
  <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>
package/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.demo.ts CHANGED
@@ -23,6 +23,12 @@ export const demoFunc = () => html`
23
23
  margin-bottom: 0;
24
24
  }
25
25
 
26
+ .input-group {
27
+ display: flex;
28
+ flex-direction: column;
29
+ gap: 16px;
30
+ }
31
+
26
32
  .demo-grid {
27
33
  display: grid;
28
34
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -60,20 +66,22 @@ export const demoFunc = () => html`
60
66
  </dees-panel>
61
67
 
62
68
  <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
63
- <dees-input-radiogroup
64
- .label=${'Do you agree with the terms?'}
65
- .options=${['Yes', 'No', 'Maybe']}
66
- .direction=${'horizontal'}
67
- .selectedOption=${'Yes'}
68
- ></dees-input-radiogroup>
69
-
70
- <dees-input-radiogroup
71
- .label=${'Experience Level'}
72
- .options=${['Beginner', 'Intermediate', 'Expert']}
73
- .direction=${'horizontal'}
74
- .selectedOption=${'Intermediate'}
75
- .description=${'Select your experience level with web development'}
76
- ></dees-input-radiogroup>
69
+ <div class="input-group">
70
+ <dees-input-radiogroup
71
+ .label=${'Do you agree with the terms?'}
72
+ .options=${['Yes', 'No', 'Maybe']}
73
+ .direction=${'horizontal'}
74
+ .selectedOption=${'Yes'}
75
+ ></dees-input-radiogroup>
76
+
77
+ <dees-input-radiogroup
78
+ .label=${'Experience Level'}
79
+ .options=${['Beginner', 'Intermediate', 'Expert']}
80
+ .direction=${'horizontal'}
81
+ .selectedOption=${'Intermediate'}
82
+ .description=${'Select your experience level with web development'}
83
+ ></dees-input-radiogroup>
84
+ </div>
77
85
  </dees-panel>
78
86
 
79
87
  <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -132,30 +140,32 @@ export const demoFunc = () => html`
132
140
  </dees-panel>
133
141
 
134
142
  <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
135
- <dees-input-radiogroup
136
- .label=${'Theme Preference'}
137
- .options=${[
138
- { option: 'Light Theme', key: 'light', payload: 'light' },
139
- { option: 'Dark Theme', key: 'dark', payload: 'dark' },
140
- { option: 'System Default', key: 'system', payload: 'auto' }
141
- ]}
142
- .selectedOption=${'dark'}
143
- .description=${'Choose how the application should appear'}
144
- ></dees-input-radiogroup>
145
-
146
- <dees-input-radiogroup
147
- .label=${'Notification Frequency'}
148
- .options=${['All Notifications', 'Important Only', 'None']}
149
- .selectedOption=${'Important Only'}
150
- .description=${'Control how often you receive notifications'}
151
- ></dees-input-radiogroup>
152
-
153
- <dees-input-radiogroup
154
- .label=${'Language'}
155
- .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
156
- .selectedOption=${'English'}
157
- .direction=${'horizontal'}
158
- ></dees-input-radiogroup>
143
+ <div class="input-group">
144
+ <dees-input-radiogroup
145
+ .label=${'Theme Preference'}
146
+ .options=${[
147
+ { option: 'Light Theme', key: 'light', payload: 'light' },
148
+ { option: 'Dark Theme', key: 'dark', payload: 'dark' },
149
+ { option: 'System Default', key: 'system', payload: 'auto' }
150
+ ]}
151
+ .selectedOption=${'dark'}
152
+ .description=${'Choose how the application should appear'}
153
+ ></dees-input-radiogroup>
154
+
155
+ <dees-input-radiogroup
156
+ .label=${'Notification Frequency'}
157
+ .options=${['All Notifications', 'Important Only', 'None']}
158
+ .selectedOption=${'Important Only'}
159
+ .description=${'Control how often you receive notifications'}
160
+ ></dees-input-radiogroup>
161
+
162
+ <dees-input-radiogroup
163
+ .label=${'Language'}
164
+ .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
165
+ .selectedOption=${'English'}
166
+ .direction=${'horizontal'}
167
+ ></dees-input-radiogroup>
168
+ </div>
159
169
  </dees-panel>
160
170
 
161
171
  <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>