x4js 2.2.42 → 2.2.44

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "x4js",
3
- "version": "2.2.42",
3
+ "version": "2.2.44",
4
4
  "type": "module",
5
5
  "main": "src/x4.ts",
6
6
  "module": "src/x4.ts",
@@ -4,7 +4,21 @@ const x4icons = {
4
4
  empty: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path opacity=".4" d="M32 96l0 200.6 21.7-54.3C65.9 211.9 95.3 192 128 192l320 0 0-32c0-17.7-14.3-32-32-32l-117.5 0c-25.5 0-49.9-10.1-67.9-28.1L204.1 73.4c-6-6-14.1-9.4-22.6-9.4L64 64C46.3 64 32 78.3 32 96zM49.1 426.1c-2 4.9-1.4 10.5 1.6 14.9s7.9 7 13.2 7l320 0 80 0c6.5 0 12.4-4 14.9-10.1l64-160c2-4.9 1.4-10.5-1.6-14.9s-7.9-7-13.2-7l-400 0c-6.5 0-12.4 4-14.9 10.1l-64 160z"/><path d="M448 160l0 32 32 0 0-32c0-35.3-28.7-64-64-64L298.5 96c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0 80 0c19.6 0 37.3-11.9 44.6-30.2l64-160c5.9-14.8 4.1-31.5-4.8-44.7S543.9 224 528 224l-400 0c-19.6 0-37.3 11.9-44.6 30.2L32 382.8 32 96c0-17.7 14.3-32 32-32l117.5 0c8.5 0 16.6 3.4 22.6 9.4l22.6-22.6L204.1 73.4l26.5 26.5c18 18 42.4 28.1 67.9 28.1L416 128c17.7 0 32 14.3 32 32zM384 448L64 448c-5.3 0-10.3-2.6-13.2-7s-3.6-10-1.6-14.9l64-160c2.4-6.1 8.3-10.1 14.9-10.1l400 0c5.3 0 10.3 2.6 13.2 7s3.6 10 1.6 14.9l-64 160C476.4 444 470.5 448 464 448l-80 0z"/></svg>`,
5
5
  radio: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true"><circle class="fa-primary" cx="2.5" cy="2.5" r="2.5" ></circle><circle class="fa-secondary" cx="2.5" cy="2.5" r="1.25"></circle></svg>`,
6
6
  chevron: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M267.3 395.3c-6.2 6.2-16.4 6.2-22.6 0l-192-192c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L256 361.4 436.7 180.7c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6l-192 192z"/></svg>`,
7
-
7
+ folder: {
8
+ open: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 64l0 280.4L108.2 192 448 192l0-64-176 0-13.3 0-9.4-9.4L194.7 64 32 64zM51.8 448L384 448l44.2 0 96-192-376.4 0-96 192z"/><path class="fa-primary" d="M272 96L208 32 32 32 0 32 0 64 0 448l0 32 32 0 3.8 0L384 480l64 0L560 256l16-32-35.8 0L128 224 32 416 32 64l162.7 0 54.6 54.6 9.4 9.4 13.3 0 176 0 0 64 32 0 0-64 0-32-32 0L272 96zM51.8 448l96-192 376.4 0-96 192L384 448 51.8 448z"/></svg>`,
9
+ closed: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 224l448 0 0 224L32 448l0-224z"/><path class="fa-primary" d="M32 32l192 0 48 64 208 0 32 0 0 32 0 320 0 32-32 0L32 480 0 480l0-32L0 64 0 32l32 0zm240 96l-16 0-9.6-12.8L208 64 32 64l0 128 448 0 0-64-208 0zM32 224l0 224 448 0 0-224L32 224z"/></svg>`,
10
+ },
11
+ updown: `<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fa-primary" d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
12
+ star: {
13
+ solid: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M288.1 0l86.5 164 182.7 31.6L428 328.5 454.4 512 288.1 430.2 121.7 512l26.4-183.5L18.9 195.6 201.5 164 288.1 0z"/></svg>`,
14
+ light: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M374.6 164L306.1 34.3 288.1 0 270 34.3 201.5 164 57.1 189l-38.2 6.6 27 27.8L148.1 328.5 127.2 473.6 121.7 512l34.8-17.1 131.6-64.7 131.6 64.7L454.4 512l-5.5-38.4L428 328.5 530.2 223.4l27-27.8L519 189 374.6 164zM492 216.8l-86.9 89.4-11 11.3 2.2 15.6 17.8 123.5-111.9-55-14.1-6.9-14.1 6.9L162 456.5l17.8-123.5 2.2-15.6-11-11.3L84.1 216.8 207 195.5l15.5-2.7 7.3-13.9L288.1 68.6l58.2 110.3 7.3 13.9 15.5 2.7L492 216.8z"/></svg>`,
15
+ },
16
+ question: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 176c0 37.5 13.9 72.3 37.6 100.9L0 352l108.1-21.6C137.7 344.2 171.8 352 208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zm134.7-52c0-25.8 20.9-46.7 46.7-46.7l47.4 0c29.1 0 52.6 23.6 52.6 52.6c0 18.8-10.1 36.3-26.4 45.6L228 191l0 6.3 0 20-40 0 0-20 0-17.9 0-11.6 10-5.8L235 140.9c3.9-2.3 6.3-6.4 6.3-10.9c0-7-5.7-12.6-12.6-12.6l-47.4 0c-3.7 0-6.7 3-6.7 6.7l0 5.5-40 0 0-5.5zM188 250.7l40 0 0 40-40 0 0-40z"/><path class="fa-primary" d="M134.7 124c0-25.8 20.9-46.7 46.7-46.7l47.4 0c29.1 0 52.6 23.6 52.6 52.6c0 18.8-10.1 36.3-26.4 45.6L228 191l0 6.3 0 20-40 0 0-20 0-17.9 0-11.6 10-5.8L235 140.9c3.9-2.3 6.3-6.4 6.3-10.9c0-7-5.7-12.6-12.6-12.6l-47.4 0c-3.7 0-6.7 3-6.7 6.7l0 5.5-40 0 0-5.5zM188 250.7l40 0 0 40-40 0 0-40zM432 512c-95.6 0-176.2-54.6-200.5-129C348.9 372.9 448 288.3 448 176c0-5.2-.2-10.4-.6-15.5C555.1 167.1 640 243.2 640 336c0 37.5-13.9 72.3-37.6 100.9L640 512 531.9 490.4C502.3 504.2 468.2 512 432 512z"/></svg>`,
17
+ icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 352v32h16 96 16V352H304 272V240 224H256 216 200v32h16 24v96H208 192zm88-168V136H232v48h48z"/></svg>`,
18
+ checked: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`,
19
+ danger: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>`,
20
+ loading: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M207.4 20.4c2.4 8.5-2.6 17.3-11.2 19.7C101.5 66.2 32 153 32 256c0 123.7 100.3 224 224 224s224-100.3 224-224c0-103-69.5-189.8-164.3-215.9c-8.5-2.4-13.5-11.2-11.2-19.7s11.2-13.5 19.7-11.2C432.5 39.1 512 138.2 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 138.2 79.5 39.1 187.7 9.2c8.5-2.4 17.3 2.6 19.7 11.2z"/></svg>`,
21
+ close_box: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/></svg>`,
8
22
  };
9
23
 
10
24
  export default x4icons;
@@ -23,9 +23,8 @@ import { CoreEvent, EventCallback } from '../../core/core_events';
23
23
  import { asap, class_ns, getFocusableElements, IComponentInterface, isString, ITabHandler } from '../../core/core_tools';
24
24
  import { ComponentEvent } from '../../core/component';
25
25
  import { Button } from '../button/button';
26
-
26
+ import icons from "../assets/icons"
27
27
  import "./dialog.module.scss"
28
- import close_icon from "./xmark-sharp-light.svg";
29
28
 
30
29
 
31
30
  //let modal_stack: Popup[] = [];
@@ -79,7 +78,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
79
78
  }),
80
79
  props.closable ? new Button({
81
80
  id: "closebox",
82
- icon: close_icon,
81
+ icon: icons.close_box,
83
82
  tabindex: -1,
84
83
  click: () => {
85
84
  if( isString(props.closable) ) {
@@ -113,7 +113,8 @@
113
113
  .empty {
114
114
  position: relative;
115
115
  left: 50%;
116
- top: 20%;
116
+ top: 30px;
117
+ transform: translateX(-50%);
117
118
  width: fit-content;
118
119
 
119
120
  #icon {
@@ -64,6 +64,20 @@
64
64
  &> .x4viewport {
65
65
  overflow: hidden;
66
66
  display: table;
67
+
68
+ .empty {
69
+ position: relative;
70
+ left: 50%;
71
+ top: 30px;
72
+ transform: translateX(-50%);
73
+ width: fit-content;
74
+
75
+ #icon {
76
+ height: 64px;
77
+ fill: var( --accent-background );
78
+ opacity: 50%;
79
+ }
80
+ }
67
81
  }
68
82
 
69
83
  .x4item {
@@ -125,9 +125,9 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
125
125
  contextmenu: (e) => this._on_ctx_menu(e),
126
126
  } );
127
127
 
128
- if( props.items ) {
128
+ asap( ( ) => {
129
129
  this.setItems( props.items, false );
130
- }
130
+ } );
131
131
  }
132
132
 
133
133
  /**
@@ -95,6 +95,7 @@
95
95
 
96
96
  &.popup {
97
97
  &:after {
98
+ //<todo: see that
98
99
  content: url("./caret-right-solid.svg");
99
100
  width: 6px;
100
101
  }
@@ -23,12 +23,9 @@ import { Icon } from '../icon/icon';
23
23
  import { Label } from '../label/label';
24
24
  import { Button } from '../button/button';
25
25
 
26
- import "./notification.module.scss";
26
+ import icons from "../assets/icons"
27
27
 
28
- import def_icon from "./circle-check-solid.svg";
29
- import danger_icon from "./circle-exclamation-solid.svg"
30
- import spin_icon from "./circle-notch-light.svg";
31
- import close_icon from "./xmark-sharp-light.svg";
28
+ import "./notification.module.scss";
32
29
 
33
30
  /**
34
31
  *
@@ -56,14 +53,14 @@ export class Notification extends Popup {
56
53
  let icon = props.iconId;
57
54
  if( !icon ) {
58
55
  if( props.loading ) {
59
- icon = spin_icon;
56
+ icon = icons.loading;
60
57
  this.addClass( "")
61
58
  }
62
59
  else if( props.mode=="danger" ) {
63
- icon = danger_icon;
60
+ icon = icons.danger;
64
61
  }
65
62
  else {
66
- icon = def_icon;
63
+ icon = icons.checked;
67
64
  }
68
65
  }
69
66
 
@@ -82,7 +79,7 @@ export class Notification extends Popup {
82
79
  props.title ? new Label( { cls: "title", text: props.title } ) : null,
83
80
  new Label( { cls: "text", text: props.text } ),
84
81
  ] }),
85
- props.closable ? new Button( { cls: "outline", icon: close_icon, click: ( ) => {this.close( );} } ) : null
82
+ props.closable ? new Button( { cls: "outline", icon: icons.close_box, click: ( ) => {this.close( );} } ) : null
86
83
  ]
87
84
  }) );
88
85
  }
@@ -13,6 +13,7 @@
13
13
  border: 1px solid var(--border);
14
14
  overflow-y: auto;
15
15
  flex-basis: 0;
16
+ align-self: stretch;
16
17
 
17
18
  .root {
18
19
  display: grid;
@@ -24,9 +24,9 @@ import { Label, SimpleText } from "../label/label"
24
24
  import { asap, class_ns, isFunction, isNumber } from '../../core/core_tools';
25
25
  import { Icon } from '../components'
26
26
 
27
- import "./progrid.module.scss"
28
- import updown_icon from "./updown.svg"
27
+ import icons from "../assets/icons"
29
28
 
29
+ import "./progrid.module.scss"
30
30
 
31
31
  type IValue = boolean | number | string;
32
32
  type IValueCB = ( name: string) => IValue;
@@ -148,7 +148,7 @@ export class PropertyGrid extends VBox {
148
148
  new SimpleText({ cls: "title", text: g.title }),
149
149
  g.desc ? new SimpleText({ cls: "desc", text: g.desc }) : null,
150
150
  ]}),
151
- g.collapsible? new Button({ icon: updown_icon, click: (e) => toggle(tr) }) : null,
151
+ g.collapsible? new Button({ icon: icons.updown, click: (e) => toggle(tr) }) : null,
152
152
  ]
153
153
  });
154
154
 
@@ -19,10 +19,11 @@ import { EventCallback } from '../../core/core_events';
19
19
  import { HBox } from '../boxes/boxes';
20
20
  import { Input } from '../input/input';
21
21
  import { Icon } from '../icon/icon';
22
+ import { class_ns } from '../../core/core_tools';
23
+
24
+ import icons from "../assets/icons"
22
25
 
23
26
  import "./rating.module.scss"
24
- import star_icon from "./star-sharp-solid.svg"
25
- import { class_ns } from '../../core/core_tools';
26
27
 
27
28
  interface RatingEventMap extends ComponentEvents {
28
29
  change: EvChange;
@@ -60,7 +61,7 @@ export class Rating extends HBox<RatingProps,RatingEventMap> {
60
61
 
61
62
  const props = this.props;
62
63
 
63
- let shape = props.icon ?? star_icon;
64
+ let shape = props.icon ?? icons.star.solid;
64
65
  let value = props.value ?? 0;
65
66
 
66
67
  this.m_input = new Input( {
@@ -30,7 +30,7 @@ import { Viewport } from '../viewport/viewport';
30
30
  import { SimpleText } from '../label/label';
31
31
  import { CoreElement } from '../../x4.js';
32
32
 
33
- const check_icon = `<svg viewBox="0 0 10 7" fill="none" aria-hidden="true"><path d="M4 4.586L1.707 2.293A1 1 0 1 0 .293 3.707l3 3a.997.997 0 0 0 1.414 0l5-5A1 1 0 1 0 8.293.293L4 4.586z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`;
33
+ import icons from "../assets/icons"
34
34
  import "./spreadsheet.module.scss"
35
35
 
36
36
  interface CellRef {
@@ -674,7 +674,7 @@ export class Spreadsheet<P extends SpreadsheetProps = SpreadsheetProps, E extend
674
674
  switch (type) {
675
675
  case "checkbox": {
676
676
  if (data) {
677
- return new Icon({ cls: "cell-check" + cls, iconId: check_icon });
677
+ return new Icon({ cls: "cell-check" + cls, iconId: icons.check });
678
678
  }
679
679
 
680
680
  return undefined;
@@ -14,7 +14,7 @@
14
14
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
15
15
  **/
16
16
 
17
- import { Component, componentFromDOM, wrapDOM } from '../../core/component';
17
+ import { Component, wrapDOM } from '../../core/component';
18
18
  import { class_ns, ITipHandler, Point, Rect, Timer, UnsafeHtml, unsafeHtml } from '../../core/core_tools';
19
19
 
20
20
  import { HBox } from '../boxes/boxes';
@@ -23,7 +23,7 @@ import { Icon } from '../icon/icon';
23
23
 
24
24
  import "./tooltips.scss"
25
25
 
26
- import icon from "./comments-question.svg"
26
+ import icons from "../assets/icons"
27
27
 
28
28
 
29
29
  let last_hit: HTMLElement = null;
@@ -105,7 +105,7 @@ class Tooltip extends Popup {
105
105
 
106
106
  this.setContent(
107
107
  new HBox( {content: [
108
- new Icon( { iconId: icon } ),
108
+ new Icon( { iconId: icons.question } ),
109
109
  new Component( { id: "text" } )
110
110
  ]} )
111
111
  );
@@ -58,6 +58,20 @@
58
58
  position: relative;
59
59
 
60
60
  &> .x4viewport {
61
+ .empty {
62
+ position: relative;
63
+ left: 50%;
64
+ top: 30px;
65
+ transform: translateX(-50%);
66
+ width: fit-content;
67
+
68
+ #icon {
69
+ height: 64px;
70
+ fill: var( --accent-background );
71
+ opacity: 50%;
72
+ }
73
+ }
74
+
61
75
  // child + subitems
62
76
  .x4ctreeviewitem {
63
77
  &>.label {
@@ -14,7 +14,7 @@
14
14
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
15
15
  **/
16
16
 
17
- import { class_ns } from '../../core/core_tools';
17
+ import { asap, class_ns } from '../../core/core_tools';
18
18
  import { EventCallback } from '../../core/core_events';
19
19
  import { Component, ComponentEvent, ComponentEvents, ComponentProps, EvClick, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
20
20
 
@@ -122,7 +122,10 @@ class CTreeViewItem extends Box {
122
122
 
123
123
  this.addClass( "folder" )
124
124
  this.setClass( "open", item.open );
125
- this.setItems( item.children );
125
+
126
+ asap( ( ) => {
127
+ this.setItems( item.children );
128
+ } );
126
129
 
127
130
  this._icon.addDOMEvent( "click", ( ev )=>this.toggle(ev) );
128
131
  }
@@ -206,9 +209,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
206
209
  keydown: ( ev ) => this._onkey( ev ),
207
210
  });
208
211
 
209
- if( props.items ) {
210
- this.setItems( props.items );
211
- }
212
+ this.setItems( props.items );
212
213
  }
213
214
 
214
215
  /**
@@ -195,15 +195,15 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
195
195
  this.show( false );
196
196
  }
197
197
 
198
- if( props.flex===true ) {
198
+ if( props.flex ) {
199
199
  this.addClass( "x4flex" );
200
+ if( props.flex!==true && props.flex!==1 ) {
201
+ this.setStyle( {
202
+ "flexGrow": props.flex+""
203
+ });
204
+ }
200
205
  }
201
- else if( props.flex!==undefined ) {
202
- this.setStyle( {
203
- "flexGrow": props.flex+""
204
- });
205
- }
206
-
206
+
207
207
  if( props.id!==undefined ) {
208
208
  this.setAttribute( "id", props.id );
209
209
  }
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M207.4 20.4c2.4 8.5-2.6 17.3-11.2 19.7C101.5 66.2 32 153 32 256c0 123.7 100.3 224 224 224s224-100.3 224-224c0-103-69.5-189.8-164.3-215.9c-8.5-2.4-13.5-11.2-11.2-19.7s11.2-13.5 19.7-11.2C432.5 39.1 512 138.2 512 256c0 141.4-114.6 256-256 256S0 397.4 0 256C0 138.2 79.5 39.1 187.7 9.2c8.5-2.4 17.3 2.6 19.7 11.2z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 224l448 0 0 224L32 448l0-224z"/><path class="fa-primary" d="M32 32l192 0 48 64 208 0 32 0 0 32 0 320 0 32-32 0L32 480 0 480l0-32L0 64 0 32l32 0zm240 96l-16 0-9.6-12.8L208 64 32 64l0 128 448 0 0-64-208 0zM32 224l0 224 448 0 0-224L32 224z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M32 64l0 280.4L108.2 192 448 192l0-64-176 0-13.3 0-9.4-9.4L194.7 64 32 64zM51.8 448L384 448l44.2 0 96-192-376.4 0-96 192z"/><path class="fa-primary" d="M272 96L208 32 32 32 0 32 0 64 0 448l0 32 32 0 3.8 0L384 480l64 0L560 256l16-32-35.8 0L128 224 32 416 32 64l162.7 0 54.6 54.6 9.4 9.4 13.3 0 176 0 0 64 32 0 0-64 0-32-32 0L272 96zM51.8 448l96-192 376.4 0-96 192L384 448 51.8 448z"/></svg>
@@ -1,4 +0,0 @@
1
- <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path class="fa-primary" d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
3
- </path>
4
- </svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M374.6 164L306.1 34.3 288.1 0 270 34.3 201.5 164 57.1 189l-38.2 6.6 27 27.8L148.1 328.5 127.2 473.6 121.7 512l34.8-17.1 131.6-64.7 131.6 64.7L454.4 512l-5.5-38.4L428 328.5 530.2 223.4l27-27.8L519 189 374.6 164zM492 216.8l-86.9 89.4-11 11.3 2.2 15.6 17.8 123.5-111.9-55-14.1-6.9-14.1 6.9L162 456.5l17.8-123.5 2.2-15.6-11-11.3L84.1 216.8 207 195.5l15.5-2.7 7.3-13.9L288.1 68.6l58.2 110.3 7.3 13.9 15.5 2.7L492 216.8z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M288.1 0l86.5 164 182.7 31.6L428 328.5 454.4 512 288.1 430.2 121.7 512l26.4-183.5L18.9 195.6 201.5 164 288.1 0z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"> <!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM192 352v32h16 96 16V352H304 272V240 224H256 216 200v32h16 24v96H208 192zm88-168V136H232v48h48z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path class="fa-secondary" opacity=".4" d="M0 176c0 37.5 13.9 72.3 37.6 100.9L0 352l108.1-21.6C137.7 344.2 171.8 352 208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zm134.7-52c0-25.8 20.9-46.7 46.7-46.7l47.4 0c29.1 0 52.6 23.6 52.6 52.6c0 18.8-10.1 36.3-26.4 45.6L228 191l0 6.3 0 20-40 0 0-20 0-17.9 0-11.6 10-5.8L235 140.9c3.9-2.3 6.3-6.4 6.3-10.9c0-7-5.7-12.6-12.6-12.6l-47.4 0c-3.7 0-6.7 3-6.7 6.7l0 5.5-40 0 0-5.5zM188 250.7l40 0 0 40-40 0 0-40z"/><path class="fa-primary" d="M134.7 124c0-25.8 20.9-46.7 46.7-46.7l47.4 0c29.1 0 52.6 23.6 52.6 52.6c0 18.8-10.1 36.3-26.4 45.6L228 191l0 6.3 0 20-40 0 0-20 0-17.9 0-11.6 10-5.8L235 140.9c3.9-2.3 6.3-6.4 6.3-10.9c0-7-5.7-12.6-12.6-12.6l-47.4 0c-3.7 0-6.7 3-6.7 6.7l0 5.5-40 0 0-5.5zM188 250.7l40 0 0 40-40 0 0-40zM432 512c-95.6 0-176.2-54.6-200.5-129C348.9 372.9 448 288.3 448 176c0-5.2-.2-10.4-.6-15.5C555.1 167.1 640 243.2 640 336c0 37.5-13.9 72.3-37.6 100.9L640 512 531.9 490.4C502.3 504.2 468.2 512 432 512z"/></svg>