Add progress spinner & slide toggle component

docs/components/progress_spinner.md

@@ -0,0 +1 @@
+::: mesop.components.progress_spinner.progress_spinner

generator/generate_ng_ts.py

@@ -66,15 +66,18 @@ def generate_ts_getter_method(prop: pb.Prop) -> str:
 
 
 def generate_ts_event_method(prop: pb.OutputProp) -> str:
-  arg = (
-    "event"
-    if prop.event_js_type.is_primitive
-    else f"event.{prop.event_props[0].name}"
-  )
+  set_value = ""
+  if len(prop.event_props):
+    arg = (
+      "event"
+      if prop.event_js_type.is_primitive
+      else f"event.{prop.event_props[0].name}"
+    )
+    set_value = f"userEvent.set{format_proto_xtype(prop.event_props[0].type).capitalize()}({arg})"
   return f"""
   on{prop.event_name}(event: {prop.event_js_type.type_name}): void {{
     const userEvent = new UserEvent();
-    userEvent.set{format_proto_xtype(prop.event_props[0].type).capitalize()}({arg})
+    {set_value}
     userEvent.setHandlerId(this.config().getOn{prop.event_name}HandlerId())
     userEvent.setKey(this.key);
     this.channel.dispatch(userEvent);

generator/generate_py_component.py

@@ -79,7 +79,8 @@ def generate_py_events(spec: pb.ComponentSpec) -> str:
 
 
 def generate_py_event(output_prop: pb.OutputProp) -> str:
-  return f"""
+  if len(output_prop.event_props):
+    return f"""
 @dataclass
 class {output_prop.event_name}(MesopEvent):
   {output_prop.event_props[0].name}: {format_py_xtype(output_prop.event_props[0].type)}
@@ -90,6 +91,18 @@ class {output_prop.event_name}(MesopEvent):
     key=key,
     {output_prop.event_props[0].name}=event.{format_proto_xtype(output_prop.event_props[0].type)},
   ),
+)
+    """
+  return f"""
+@dataclass
+class {output_prop.event_name}(MesopEvent):
+  pass
+
+register_event_mapper(
+  {output_prop.event_name},
+  lambda event, key: {output_prop.event_name}(
+    key=key,
+  ),
 )
   """
 

generator/output_data/progress_spinner.binarypb

@@ -0,0 +1,11 @@
+
+|
+progress_spinner"MatProgressSpinner*mat-progress-spinner2>
+"@angular/material/progress-spinnerMatProgressSpinnerModule9
+color
2,Theme palette color of the progress spinner.�

+mode+)
+determinate
+indeterminatedeterminateProgressSpinnerMode2�
Mode of the progress bar. Input must be one of these values: determinate, indeterminate, buffer, query, defaults to 'determinate'. Mirrored to mode attribute.\
+valuenumber2GValue of the progress bar. Defaults to zero. Mirrored to aria-valuenow.`
+diameternumber2HThe diameter of the progress spinner (will set width and height of svg).@
+strokeWidthnumber2%Stroke width of the progress spinner.

generator/output_data/progress_spinner.json

@@ -0,0 +1,77 @@
+{
+  "input": {
+    "name": "progress_spinner",
+    "targetClass": "MatProgressSpinner",
+    "hasContent": false,
+    "elementName": "mat-progress-spinner",
+    "tsFilename": "",
+    "directiveNamesList": [],
+    "nativeEventsList": [],
+    "skipPropertyNamesList": [],
+    "ngModulesList": [
+      {
+        "importPath": "@angular/material/progress-spinner",
+        "moduleName": "MatProgressSpinnerModule",
+        "otherSymbolsList": []
+      }
+    ],
+    "isFormField": false
+  },
+  "inputPropsList": [
+    {
+      "name": "color",
+      "alias": "",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "",
+      "target": 0,
+      "docs": "Theme palette color of the progress spinner."
+    },
+    {
+      "name": "mode",
+      "alias": "",
+      "type": {
+        "simpleType": 0,
+        "stringLiterals": {
+          "stringLiteralList": ["determinate", "indeterminate"],
+          "defaultValue": "determinate"
+        }
+      },
+      "debugType": "ProgressSpinnerMode",
+      "target": 0,
+      "docs": "Mode of the progress bar. Input must be one of these values: determinate, indeterminate, buffer, query, defaults to 'determinate'. Mirrored to mode attribute."
+    },
+    {
+      "name": "value",
+      "alias": "",
+      "type": {
+        "simpleType": 3
+      },
+      "debugType": "number",
+      "target": 0,
+      "docs": "Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow."
+    },
+    {
+      "name": "diameter",
+      "alias": "",
+      "type": {
+        "simpleType": 3
+      },
+      "debugType": "number",
+      "target": 0,
+      "docs": "The diameter of the progress spinner (will set width and height of svg)."
+    },
+    {
+      "name": "strokeWidth",
+      "alias": "",
+      "type": {
+        "simpleType": 3
+      },
+      "debugType": "number",
+      "target": 0,
+      "docs": "Stroke width of the progress spinner."
+    }
+  ],
+  "outputPropsList": []
+}

generator/output_data/slide_toggle.binarypb

@@ -0,0 +1,22 @@
+
+�

+slide_toggle"MatSlideToggle*mat-slide-toggleRtoggleChange2L
+@angular/material/slide-toggleMatSlideToggleModuleMatSlideToggleChangeV
+name
string | null2;Name value will be applied to the input element if present.i
+id
string2WA unique id for the slide-toggle input. If none is supplied, it will be auto-generated.�

+labelPosition
+before
+afterafter'before' | 'after'2VWhether the label should appear after or before the slide-toggle. Defaults to 'after'.q
+	ariaLabel"
+aria-label
string | null2EUsed to set the aria-label attribute on the underlying input element.�

+ariaLabelledby"aria-labelledby
string | null2JUsed to set the aria-labelledby attribute on the underlying input element.|
+ariaDescribedby"aria-describedby
string2KUsed to set the aria-describedby attribute on the underlying input element.>
+requiredboolean2%Whether the slide-toggle is required.?
+color
string | undefined2Palette color of slide toggle.>
+disabledboolean2%Whether the slide toggle is disabled.D
+disableRippleboolean2&Whether the slide toggle has a ripple.1
+tabIndexnumber2Tabindex of slide toggle.K
+checkedboolean23Whether the slide-toggle element is checked or not.M
+hideIconboolean24Whether to hide the icon inside of the slide toggle.�

+changeSlideToggleChangeEvent"
+MatSlideToggleChange*IAn event will be dispatched each time the slide-toggle changes its value.

generator/output_data/slide_toggle.json

@@ -0,0 +1,168 @@
+{
+  "input": {
+    "name": "slide_toggle",
+    "targetClass": "MatSlideToggle",
+    "hasContent": false,
+    "elementName": "mat-slide-toggle",
+    "tsFilename": "",
+    "directiveNamesList": [],
+    "nativeEventsList": [],
+    "skipPropertyNamesList": ["toggleChange"],
+    "ngModulesList": [
+      {
+        "importPath": "@angular/material/slide-toggle",
+        "moduleName": "MatSlideToggleModule",
+        "otherSymbolsList": ["MatSlideToggleChange"]
+      }
+    ],
+    "isFormField": false
+  },
+  "inputPropsList": [
+    {
+      "name": "name",
+      "alias": "",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "string | null",
+      "target": 0,
+      "docs": "Name value will be applied to the input element if present."
+    },
+    {
+      "name": "id",
+      "alias": "",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "string",
+      "target": 0,
+      "docs": "A unique id for the slide-toggle input. If none is supplied, it will be auto-generated."
+    },
+    {
+      "name": "labelPosition",
+      "alias": "",
+      "type": {
+        "simpleType": 0,
+        "stringLiterals": {
+          "stringLiteralList": ["before", "after"],
+          "defaultValue": "after"
+        }
+      },
+      "debugType": "'before' | 'after'",
+      "target": 0,
+      "docs": "Whether the label should appear after or before the slide-toggle. Defaults to 'after'."
+    },
+    {
+      "name": "ariaLabel",
+      "alias": "aria-label",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "string | null",
+      "target": 0,
+      "docs": "Used to set the aria-label attribute on the underlying input element."
+    },
+    {
+      "name": "ariaLabelledby",
+      "alias": "aria-labelledby",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "string | null",
+      "target": 0,
+      "docs": "Used to set the aria-labelledby attribute on the underlying input element."
+    },
+    {
+      "name": "ariaDescribedby",
+      "alias": "aria-describedby",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "string",
+      "target": 0,
+      "docs": "Used to set the aria-describedby attribute on the underlying input element."
+    },
+    {
+      "name": "required",
+      "alias": "",
+      "type": {
+        "simpleType": 2
+      },
+      "debugType": "boolean",
+      "target": 0,
+      "docs": "Whether the slide-toggle is required."
+    },
+    {
+      "name": "color",
+      "alias": "",
+      "type": {
+        "simpleType": 1
+      },
+      "debugType": "string | undefined",
+      "target": 0,
+      "docs": "Palette color of slide toggle."
+    },
+    {
+      "name": "disabled",
+      "alias": "",
+      "type": {
+        "simpleType": 2
+      },
+      "debugType": "boolean",
+      "target": 0,
+      "docs": "Whether the slide toggle is disabled."
+    },
+    {
+      "name": "disableRipple",
+      "alias": "",
+      "type": {
+        "simpleType": 2
+      },
+      "debugType": "boolean",
+      "target": 0,
+      "docs": "Whether the slide toggle has a ripple."
+    },
+    {
+      "name": "tabIndex",
+      "alias": "",
+      "type": {
+        "simpleType": 3
+      },
+      "debugType": "number",
+      "target": 0,
+      "docs": "Tabindex of slide toggle."
+    },
+    {
+      "name": "checked",
+      "alias": "",
+      "type": {
+        "simpleType": 2
+      },
+      "debugType": "boolean",
+      "target": 0,
+      "docs": "Whether the slide-toggle element is checked or not."
+    },
+    {
+      "name": "hideIcon",
+      "alias": "",
+      "type": {
+        "simpleType": 2
+      },
+      "debugType": "boolean",
+      "target": 0,
+      "docs": "Whether to hide the icon inside of the slide toggle."
+    }
+  ],
+  "outputPropsList": [
+    {
+      "name": "change",
+      "eventName": "SlideToggleChangeEvent",
+      "eventPropsList": [],
+      "eventJsType": {
+        "typeName": "MatSlideToggleChange",
+        "isPrimitive": false
+      },
+      "docs": "An event will be dispatched each time the slide-toggle changes its value."
+    }
+  ]
+}

generator/spec_generator.ts

@@ -85,6 +85,20 @@ const progressBarSpecInput = (() => {
   return i;
 })();
 
+const progressSpinnerSpecInput = (() => {
+  const i = new pb.ComponentSpecInput();
+  i.setName('progress_spinner');
+  return i;
+})();
+
+const slideToggleSpecInput = (() => {
+  const i = new pb.ComponentSpecInput();
+  i.setName('slide_toggle');
+  // This adds a very confusing event that doesn't seem to have a use case for us.
+  i.addSkipPropertyNames('toggleChange');
+  return i;
+})();
+
 const SYSTEM_IMPORT_PREFIX = '@angular/material/';
 const SYSTEM_PREFIX = 'Mat';
 const SPEC_INPUTS = [
@@ -97,6 +111,8 @@ const SPEC_INPUTS = [
   dividerSpecInput,
   iconSpecInput,
   progressBarSpecInput,
+  progressSpinnerSpecInput,
+  slideToggleSpecInput,
 ].map(preprocessSpecInput);
 
 function preprocessSpecInput(
@@ -300,7 +316,9 @@ class NgParser {
     } else if (
       !member.type &&
       name === 'color' &&
-      ['icon', 'progress_bar'].includes(this.input.getName())
+      ['icon', 'progress_bar', 'progress_spinner'].includes(
+        this.input.getName(),
+      )
     ) {
       // Technically this is a union between string and ThemePalette (which is a union of string literal)
       // string is the more flexible type.
@@ -380,7 +398,7 @@ class NgParser {
         xType.setSimpleType(simpleType);
         eventProp.setType(xType);
         outputProp.addEventProps(eventProp);
-      } else {
+      } else if (type !== 'void') {
         // Need to import complex type.
         this.input.getNgModulesList()[0].addOtherSymbols(type);
         outputProp.setEventPropsList(this.getEventProps(type));
@@ -390,6 +408,7 @@ class NgParser {
   }
 
   getEventProps(type: string): pb.Prop[] {
+    if (type === 'void') return [];
     for (const statement of this.sourceFile.statements) {
       if (ts.isClassDeclaration(statement)) {
         const cls = statement;