@web-atoms/web-controls 2.1.74 → 2.1.78

package/src/basic/CheckBoxList.tsx

@@ -0,0 +1,56 @@
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import Colors from "@web-atoms/core/dist/core/Colors";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import AtomRepeater from "./AtomRepeater";
+
+CSS(StyleRule()
+    .flexLayout({ inline: true, justifyContent: "flex-start"})
+    .flexFlow("wrap"),
+"div[data-checkbox-list=checkbox-list]");
+
+CSS(StyleRule()
+    .flexLayout({ justifyContent: "flex-start" })
+    .marginRight(5)
+    .child(StyleRule("span")
+        .cursor("pointer")
+    )
+    .and(StyleRule("[data-selected-item=true]")
+        .color(Colors.blue)
+    )
+    .displayNone("[data-selected-item=true] > i.far")
+    .displayNone("[data-selected-item=false] > i.fas")
+, "div[data-item-type=checkbox]");
+
+export default class CheckBoxList extends AtomRepeater {
+
+    @BindableProperty
+    public labelPath;
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.element.dataset.checkboxList = "checkbox-list";
+        this.bindEvent(this.element, "itemClick", (e: CustomEvent) => {
+            const s = this.selectedItems;
+            if (!s) {
+                return;
+            }
+            const item = e.detail;
+            if (s.indexOf(item) === -1) {
+                s.add(item);
+                this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
+            } else {
+                this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: item, bubbles: false }));
+                s.remove(item);
+            }
+        });
+
+        this.itemRenderer = (item) => <div data-item-type="checkbox">
+            <i class="far fa-square"/>
+            <i class="fas fa-check-square"/>
+            <span text={item.label}/>
+        </div>;
+    }
+
+}

package/src/basic/FormField.tsx

@@ -39,6 +39,7 @@ const css = CSS(StyleRule()
         )
     )
     .child(StyleRule(".label")
+        .display("flex")
         .child(StyleRule(".true")
             .visibility("visible")
             .color(Colors.red)
@@ -48,24 +49,18 @@ const css = CSS(StyleRule()
         )
         .child(StyleRule("i")
             .cursor("pointer")
-            .marginLeft(5)
+            .marginLeft("auto")
+            .color(Colors.lightGreen)
         )
     )
 , "div[data-wa-form-field=wa-form-field]");
 
-const helpCSS = CSS(StyleRule()
-    .padding(10)
-    .child(StyleRule(".fad")
-        .absolutePosition({ top: 5, right: 5 })
-    )
-);
-
 export default function FormField(
     {
         label,
         required,
         error,
-        helpIcon = "fad fa-question-circle",
+        helpIcon = "fas fa-question-circle",
         help,
         helpEventClick,
         helpTitle,
@@ -82,21 +77,14 @@ export default function FormField(
                 return;
             }
 
-            const cancelToken = new CancelToken();
-
-            class HelpPopup extends AtomControl {
+            class HelpPopup extends PopupWindow {
                 protected create(): void {
-                    this.render(<div class={helpCSS}>
-                        <i
-                            class="fad fa-times-circle"
-                            eventClick={() => cancelToken.cancel()}
-                            />
+                    this.render(<div>
                         { help as any}
                     </div>);
                 }
             }
-            const hp = new HelpPopup(app);
-            PopupService.show(s.element as any, hp.element, { alignment: "centerOfScreen", cancelToken });
+            HelpPopup.showWindow({ title : helpTitle ?? "Help" });
         });
     }
 

package/src/basic/RadioButtonList.tsx

@@ -0,0 +1,56 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import Colors from "@web-atoms/core/dist/core/Colors";
+import XNode from "@web-atoms/core/dist/core/XNode";
+import StyleRule from "@web-atoms/core/dist/style/StyleRule";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+import CSS from "@web-atoms/core/dist/web/styles/CSS";
+import AtomRepeater from "./AtomRepeater";
+
+CSS(StyleRule()
+    .flexLayout({ inline: true, justifyContent: "flex-start"})
+    .flexFlow("wrap"),
+"*[data-radio-button-list=radio-button-list]");
+
+CSS(StyleRule()
+    .flexLayout({ justifyContent: "flex-start" })
+    .marginRight(5)
+    .child(StyleRule("span")
+        .cursor("pointer")
+    )
+    .and(StyleRule("[data-selected-item=true]")
+        .color(Colors.blue)
+    )
+    .displayNone("[data-selected-item=true] > i.fa-circle")
+    .displayNone("[data-selected-item=false] > i.fa-dot-circle")
+, "div[data-item-type=radio]");
+
+export default class RadioButtonList extends AtomRepeater {
+
+    protected preCreate(): void {
+        super.preCreate();
+        this.valuePath = (item) => item?.value ?? item;
+        this.bindEvent(this.element, "itemClick", (e: CustomEvent) => {
+            const s = this.selectedItems;
+            if (!s) {
+                return;
+            }
+            const item = e.detail;
+            const old = this.selectedItem;
+            if (old) {
+                this.element.dispatchEvent(new CustomEvent("itemDeselect", { detail: old, bubbles: false }));
+            }
+            this.selectedItem = item;
+            this.element.dispatchEvent(new CustomEvent("itemSelect", { detail: item, bubbles: false }));
+        });
+        this.element.dataset.radioButtonList = "radio-button-list";
+        this.itemRenderer = (item) => <div
+            data-item-type="radio">
+            <i class="far fa-dot-circle"/>
+            <i class="far fa-circle"/>
+            <span text={item.label}/>
+        </div>;
+
+    }
+
+}