scu-web-components 0.0.94 → 0.0.95

package/dist/docs/components/ScwForm.json

@@ -17,7 +17,7 @@
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwForm) where to submit search, same as form",
+      "description": "(ScwForm) URL, where to submit form",
       "attribute": "action"
     },
     {
@@ -26,9 +26,19 @@
       "type": {
         "text": "FormMethods"
       },
-      "description": "(ScwForm) how to submit search, same as form",
+      "description": "(ScwForm) HTTP method used to submit form",
       "attribute": "method"
     },
+    {
+      "kind": "field",
+      "name": "ajax",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwForm) Sumbit form via AJAX",
+      "attribute": "ajax"
+    },
     {
       "kind": "method",
       "name": "findFormElements",
@@ -240,7 +250,7 @@
       "type": {
         "text": "string | undefined"
       },
-      "description": "(ScwForm) where to submit search, same as form",
+      "description": "(ScwForm) URL, where to submit form",
       "fieldName": "action"
     },
     {
@@ -248,9 +258,18 @@
       "type": {
         "text": "FormMethods"
       },
-      "description": "(ScwForm) how to submit search, same as form",
+      "description": "(ScwForm) HTTP method used to submit form",
       "fieldName": "method"
     },
+    {
+      "name": "ajax",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwForm) Sumbit form via AJAX",
+      "fieldName": "ajax"
+    },
     {
       "name": "aria-label",
       "type": {
@@ -334,7 +353,7 @@
     },
     {
       "title": "Full",
-      "code": "\n        <scw-form>\n          <scw-flex-h-component\n            scw-fill-children\n            class-bp-md=\"scw-stack\">\n            <scw-input\n              aria-label=\"Input\"\n              name=\"input-example\"\n              required>\n            </scw-input>\n            <scw-checkbox aria-label=\"I agree to all the things\" required name='test'></scw-checkbox>\n            <scw-select\n              aria-label=\"Select\"\n              name=\"textarea-example\"\n              required>\n              <scw-option aria-label=\"volvo\" value=\"volvo\">Volvo</scw-option>\n              <scw-option aria-label=\"saab\" value=\"saab\">Saab</scw-option>\n              <scw-option aria-label=\"mercedes\" value=\"mercedes\">Mercedes</scw-option>\n              <scw-option aria-label=\"audi\" value=\"audi\">Audi</scw-option>\n            </scw-select>\n          </scw-flex-h-component>\n          <scw-flex-h\n            scw-fill-children>\n            <scw-textarea\n              aria-label=\"Textarea\"\n              name=\"input-example-2\"\n              required>\n            </scw-textarea>\n          </scw-flex-h>\n          <scw-flex-h-component\n            class-bp-md=\"scw-stack\">\n            <scw-fill></scw-fill>\n            <scw-button\n              aria-label=\"Submit\"\n              type=\"submit\">\n            </scw-button>\n          </scw-flex-h-component>\n        </scw-form>\n        <script>\n          const ele = document.currentScript.previousElementSibling;\n          ele.addEventListener(\n            'scw-submit',\n            (evt) => {\n              alert('scw-submit...check console for details');\n              console.log( 'scw-submit', evt );\n            }\n          );\n        </script>"
+      "code": "\n        <scw-form>\n          <scw-flex-h-component\n            scw-fill-children\n            class-bp-md=\"scw-stack\">\n            <scw-input\n              aria-label=\"Input\"\n              name=\"input-example\"\n              required>\n            </scw-input>\n            <scw-checkbox aria-label=\"I agree to all the things\" required name='test'></scw-checkbox>\n            <scw-select\n              aria-label=\"Select\"\n              name=\"textarea-example\"\n              required>\n              <scw-option aria-label=\"volvo\" value=\"volvo\">Volvo</scw-option>\n              <scw-option aria-label=\"saab\" value=\"saab\">Saab</scw-option>\n              <scw-option aria-label=\"mercedes\" value=\"mercedes\">Mercedes</scw-option>\n              <scw-option aria-label=\"audi\" value=\"audi\">Audi</scw-option>\n            </scw-select>\n            <scw-radio-group\n              aria-label=\"Radio Group\"\n              name=\"radio-example\"\n              required>\n              <scw-radio aria-label=\"Option 1\"></scw-radio>\n              <scw-radio aria-label=\"Option 2\"></scw-radio>\n              <scw-radio aria-label=\"Option 3\"></scw-radio>\n            </scw-radio-group>\n          </scw-flex-h-component>\n          <scw-flex-h\n            scw-fill-children>\n            <scw-textarea\n              aria-label=\"Textarea\"\n              name=\"input-example-2\"\n              required>\n            </scw-textarea>\n          </scw-flex-h>\n          <scw-flex-h-component\n            class-bp-md=\"scw-stack\">\n            <scw-fill></scw-fill>\n            <scw-button\n              aria-label=\"Submit\"\n              type=\"submit\">\n            </scw-button>\n          </scw-flex-h-component>\n        </scw-form>\n        <script>\n          const ele = document.currentScript.previousElementSibling;\n          ele.addEventListener(\n            'scw-submit',\n            (evt) => {\n              alert('scw-submit...check console for details');\n              console.log( 'scw-submit', evt );\n            }\n          );\n        </script>"
     }
   ]
 }

package/dist/docs/components/ScwInput.json

@@ -14,22 +14,6 @@
     }
   ],
   "members": [
-    {
-      "kind": "field",
-      "name": "scwInputField",
-      "type": {
-        "text": "any"
-      },
-      "description": "scw-input-field with versioning suffix"
-    },
-    {
-      "kind": "field",
-      "name": "scwInputLayout",
-      "type": {
-        "text": "any"
-      },
-      "description": "scw-single-input-layout with versioning suffix"
-    },
     {
       "kind": "field",
       "name": "type",

package/dist/docs/components/{ScwInputLayout.json → ScwRadio.json}

@@ -1,64 +1,70 @@
 {
-  "path": "src/scw-input-layout/scw-input-layout.ts",
+  "path": "src/scw-radio/ScwRadio.ts",
   "kind": "class",
   "description": "",
-  "name": "ScwInputLayout",
+  "name": "ScwRadio",
   "members": [
     {
       "kind": "field",
-      "name": "label",
+      "name": "value",
       "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwInputLayout) the text to use for the label",
-      "attribute": "label"
-    },
-    {
-      "kind": "field",
-      "name": "feedback",
-      "type": {
-        "text": "string | undefined"
+        "text": "string"
       },
-      "description": "(ScwInputLayout) the text to use for feedback",
-      "attribute": "feedback"
+      "default": "''",
+      "description": "(ScwRadio) Text inside the button",
+      "attribute": "value"
     },
     {
       "kind": "field",
-      "name": "hideLabel",
+      "name": "selected",
       "type": {
         "text": "boolean"
       },
       "default": "false",
-      "description": "(ScwInputLayout) hides the main label",
-      "attribute": "hide-label"
+      "description": "(ScwRadio) If the button is active or not",
+      "attribute": "selected",
+      "reflects": true
     },
     {
       "kind": "field",
-      "name": "hideFeedback",
+      "name": "alignment",
       "type": {
-        "text": "boolean"
+        "text": "string"
       },
-      "default": "false",
-      "description": "(ScwInputLayout) hides the feedback label",
-      "attribute": "hide-feedback"
+      "default": "'center'",
+      "description": "alignment of text",
+      "attribute": "alignment"
     },
     {
       "kind": "field",
-      "name": "rightIcon",
+      "name": "input",
       "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwInputLayout) shows first right icon and determines the icon svg.",
-      "attribute": "right-icon"
+        "text": "HTMLElement"
+      }
     },
     {
-      "kind": "field",
-      "name": "right2Icon",
-      "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwInputLayout) shows second right icon and determines the icon svg.",
-      "attribute": "right-2-icon"
+      "kind": "method",
+      "name": "handleSelectedChange",
+      "description": "handleSelectedChange"
+    },
+    {
+      "kind": "method",
+      "name": "handleClick",
+      "privacy": "private",
+      "parameters": [
+        {
+          "name": "event",
+          "type": {
+            "text": "MouseEvent"
+          }
+        }
+      ],
+      "description": "handleClick"
+    },
+    {
+      "kind": "method",
+      "name": "focus",
+      "description": "Sets focus on the radio input."
     },
     {
       "kind": "field",
@@ -195,54 +201,31 @@
   ],
   "attributes": [
     {
-      "name": "label",
-      "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwInputLayout) the text to use for the label",
-      "fieldName": "label"
-    },
-    {
-      "name": "feedback",
+      "name": "value",
       "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwInputLayout) the text to use for feedback",
-      "fieldName": "feedback"
-    },
-    {
-      "name": "hide-label",
-      "type": {
-        "text": "boolean"
+        "text": "string"
       },
-      "default": "false",
-      "description": "(ScwInputLayout) hides the main label",
-      "fieldName": "hideLabel"
+      "default": "''",
+      "description": "(ScwRadio) Text inside the button",
+      "fieldName": "value"
     },
     {
-      "name": "hide-feedback",
+      "name": "selected",
       "type": {
         "text": "boolean"
       },
       "default": "false",
-      "description": "(ScwInputLayout) hides the feedback label",
-      "fieldName": "hideFeedback"
+      "description": "(ScwRadio) If the button is active or not",
+      "fieldName": "selected"
     },
     {
-      "name": "right-icon",
+      "name": "alignment",
       "type": {
-        "text": "string | undefined"
-      },
-      "description": "(ScwInputLayout) shows first right icon and determines the icon svg.",
-      "fieldName": "rightIcon"
-    },
-    {
-      "name": "right-2-icon",
-      "type": {
-        "text": "string | undefined"
+        "text": "string"
       },
-      "description": "(ScwInputLayout) shows second right icon and determines the icon svg.",
-      "fieldName": "right2Icon"
+      "default": "'center'",
+      "description": "alignment of text",
+      "fieldName": "alignment"
     },
     {
       "name": "aria-label",
@@ -311,35 +294,25 @@
   ],
   "superclass": {
     "name": "ScwComponent",
-    "module": "/src/scw-component/ScwComponent"
+    "package": "scw-component/ScwComponent"
   },
-  "tagName": "scw-input-layout",
+  "tagName": "scw-radio",
   "customElement": true,
   "category": "form",
   "status": "alpha.review",
-  "releasedInVersion": "v0.0.4",
+  "releasedInVersion": "v0.0.3",
   "adaStatus": "tbd",
   "overview": "",
   "examples": [
     {
       "title": "Simple",
-      "code": "\n        <scw-input-layout\n          label=\"Label\"\n          feedback=\"Feedback\">\n          <scw-input-field\n            value=\"text field\">\n          </scw-input-field>\n        </scw-input-layout>"
-    },
-    {
-      "title": "Full Options",
-      "code": "\n        <scw-input-layout\n          label=\"Label\"\n          feedback=\"Feedback\"\n          left-action-icon=\"icon-location\"\n          right-icon=\"icon-visible\"\n          right-2-icon=\"icon-clear\"\n          right-action-icon=\"icon-search\">\n          <scw-input-field\n            value=\"text field\">\n          </scw-input-field>\n        </scw-input-layout>"
-    },
-    {
-      "title": "Focused",
-      "code": "\n        <scw-input-layout focused\n          label=\"Label\"\n          feedback=\"Feedback\">\n          <scw-input-field\n            value=\"text field\">\n          </scw-input-field>\n        </scw-input-layout>"
-    },
-    {
-      "title": "Disabled",
-      "code": "\n        <scw-input-layout aria-disabled\n          label=\"Label\"\n          feedback=\"Feedback\">\n          <scw-input-field aria-disabled\n            value=\"text field\">\n          </scw-input-field>\n        </scw-input-layout>"
+      "description": "Basic radio input, see scw-radio-group for full usage.",
+      "code": "\n      <scw-radio name=\"simple\" aria-label=\"radio\"></scw-radio>\n      <scw-radio name=\"simple\"\n      aria-disabled aria-label=\"disabled\"></scw-radio>\n      <scw-radio name=\"simple\" selected aria-label=\"checked\"></scw-radio>\n      "
     },
     {
-      "title": "Invalid",
-      "code": "\n        <scw-input-layout invalid\n          label=\"Label\"\n          feedback=\"Feedback\">\n          <scw-input-field\n            value=\"text field\">\n          </scw-input-field>\n        </scw-input-layout>"
+      "title": "Alignment",
+      "description": "By default, text is aligned to the center of the radio.\n      Text can also be set to align to the top by setting alignment = top.",
+      "code": "<scw-flex-v class=\"scw-gap-2s\">\n        <scw-radio  \n        aria-label=\"Aliquam blandit, odio id tincidunt faucibus, nisi massa \n        pretium orci, vel commodo lacus elit non est. Proin condimentum iaculis \n        sodales. In convallis augue eros, et semper justo consequat tempus.\">\n        </scw-radio>\n        <scw-radio  \n        alignment=\"top\"\n        aria-label=\"Aliquam blandit, odio id tincidunt faucibus, nisi massa \n        pretium orci, vel commodo lacus elit non est. Proin condimentum iaculis \n        sodales. In convallis augue eros, et semper justo consequat tempus.\">\n        </scw-radio>\n      </scw-flex-v>"
     }
   ]
 }

package/dist/docs/components/ScwRadioButton.json

@@ -16,15 +16,27 @@
     },
     {
       "kind": "field",
-      "name": "active",
+      "name": "selected",
       "type": {
         "text": "boolean"
       },
       "default": "false",
       "description": "(ScwRadioButton) If the button is active or not",
-      "attribute": "active",
+      "attribute": "selected",
       "reflects": true
     },
+    {
+      "kind": "field",
+      "name": "input",
+      "type": {
+        "text": "HTMLElement"
+      }
+    },
+    {
+      "kind": "method",
+      "name": "handleValueChange",
+      "description": "handleValueChange"
+    },
     {
       "kind": "method",
       "name": "handleClick",
@@ -39,6 +51,11 @@
       ],
       "description": "handleClick"
     },
+    {
+      "kind": "method",
+      "name": "focus",
+      "description": "Sets focus on the radio button."
+    },
     {
       "kind": "field",
       "name": "element",
@@ -183,13 +200,13 @@
       "fieldName": "value"
     },
     {
-      "name": "active",
+      "name": "selected",
       "type": {
         "text": "boolean"
       },
       "default": "false",
       "description": "(ScwRadioButton) If the button is active or not",
-      "fieldName": "active"
+      "fieldName": "selected"
     },
     {
       "name": "aria-label",
@@ -262,7 +279,7 @@
   },
   "tagName": "scw-radio-button",
   "customElement": true,
-  "category": "interactive",
+  "category": "form",
   "status": "alpha.review",
   "releasedInVersion": "v0.0.3",
   "adaStatus": "tbd",
@@ -271,7 +288,7 @@
     {
       "title": "Basic",
       "description": "Used with scw-radio-group, not meant to\n      be used on it's own. See scw-radio-group for full usage.",
-      "code": "<scw-flex-h>\n        <scw-radio-button value=\"Default\">\n        </scw-radio-button>\n        <scw-radio-button active value=\"Active\">\n        </scw-radio-button>\n      </scw-flex-h>"
+      "code": "<scw-flex-h>\n        <scw-radio-button aria-label=\"Default\">\n        </scw-radio-button>\n        <scw-radio-button selected aria-label=\"Active\">\n        </scw-radio-button>\n      </scw-flex-h>"
     }
   ]
 }