fix(icon-button-toggle): replace property on with toggledOn (#2175)

apps/knapsack/data/blocks/block.F2ROXe7JZl.json

@@ -2,6 +2,87 @@
   "id": "F2ROXe7JZl",
   "blockType": "text-editor",
   "data": {
-    "content": {}
+    "content": {
+      "type": "doc",
+      "content": [
+        {
+          "type": "paragraph",
+          "attrs": {
+            "textAlign": "left"
+          },
+          "content": [
+            {
+              "type": "text",
+              "text": "*Note: Due to Angular's restriction on setting properties that start with the prefix "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "on"
+            },
+            {
+              "type": "text",
+              "text": ", the property "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "on"
+            },
+            {
+              "type": "text",
+              "text": " in "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "mwc-icon-button-toggle"
+            },
+            {
+              "type": "text",
+              "text": " has been substituted with "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "toggledOn"
+            },
+            {
+              "type": "text",
+              "text": " within "
+            },
+            {
+              "type": "text",
+              "marks": [
+                {
+                  "type": "code"
+                }
+              ],
+              "text": "cv-icon-button-toggle"
+            },
+            {
+              "type": "text",
+              "text": "."
+            }
+          ]
+        }
+      ]
+    }
   }
 }

apps/knapsack/data/blocks/block.TXAQGWjjCa.json

@@ -177,7 +177,7 @@
                               "type": "code"
                             }
                           ],
-                          "text": "on"
+                          "text": "toggledOn"
                         },
                         {
                           "type": "text",

apps/knapsack/data/knapsack.pattern.icon-button-toggle.json

@@ -31,7 +31,7 @@
           "type": "object",
           "required": [],
           "properties": {
-            "on": {
+            "toggledOn": {
               "description": "Whether the toggle is activated.",
               "type": "boolean"
             },

apps/knapsack/dist/meta/icon-button-toggle/icon-button-toggle.web-components-6kGMXrj-eP.spec.d.ts

@@ -12,7 +12,7 @@ export interface IconButtonToggle {
   /**
    * Whether the toggle is activated.
    */
-  on?: boolean;
+  toggledOn?: boolean;
   /**
    * Disabled buttons cannot be interacted with and have no visual interaction effect.
    */

apps/knapsack/dist/meta/icon-button-toggle/icon-button-toggle.web-components-6kGMXrj-eP.spec.json

@@ -4,7 +4,7 @@
   "type": "object",
   "required": [],
   "properties": {
-    "on": {
+    "toggledOn": {
       "description": "Whether the toggle is activated.",
       "type": "boolean"
     },

apps/knapsack/dist/meta/knapsack.html-data.json

@@ -797,7 +797,7 @@
       ],
       "attributes": [
         {
-          "name": "on",
+          "name": "toggledOn",
           "description": "boolean Whether the toggle is activated."
         },
         {

libs/components/src/icon-button-toggle/icon-button-toggle.stories.js

@@ -17,15 +17,15 @@ export default {
     onIcon: 'flashlight_on',
     offIcon: 'flashlight_off',
     disabled: false,
-    on: false,
+    toggledOn: false,
   },
 };
 
-const Template = ({ disabled, onIcon, offIcon, on }) => {
+const Template = ({ disabled, onIcon, offIcon, toggledOn }) => {
   return `
     <cv-icon-button-toggle onIcon="${onIcon}" offIcon="${offIcon}"${
     disabled ? ` disabled` : ``
-  }${on ? ' on' : ''}>
+  }${toggledOn ? ' toggledOn' : ''}>
     </cv-icon-button-toggle>`;
 };
 

libs/components/src/icon-button-toggle/icon-button-toggle.ts

@@ -1,5 +1,5 @@
-import { css, html, unsafeCSS } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { css, html, PropertyValues, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { IconButtonToggle } from '@material/mwc-icon-button-toggle/mwc-icon-button-toggle';
 import styles from './icon-button-toggle.scss?inline';
 
@@ -11,18 +11,35 @@ declare global {
 
 @customElement('cv-icon-button-toggle')
 export class CovalentIconButtonToggle extends IconButtonToggle {
+  /**
+   * Angular doesn't allow properties that begin with 'on' to be set due to security reasons.
+   * This is an alias for the 'on' property in mwc-icon-button-toggle, which can be used to toggle the button on/off.
+   */
+  @property({ type: Boolean, reflect: true })
+  toggledOn = false;
+
   static override styles = [
     ...IconButtonToggle.styles,
     css`
       ${unsafeCSS(styles)}
     `,
   ];
 
+  protected update(changedProperties: PropertyValues) {
+    if (changedProperties.has('toggledOn') && this.toggledOn !== this.on) {
+      this.on = this.toggledOn;
+    }
+    if (changedProperties.has('on') && this.toggledOn !== this.on) {
+      this.toggledOn = this.on;
+    }
+    super.update(changedProperties);
+  }
+
   protected renderRipple() {
     return this.shouldRenderRipple
       ? html` <mwc-ripple
           .disabled="${this.disabled}"
-          .activated="${this.on}"
+          .activated="${this.toggledOn}"
           unbounded
         >
         </mwc-ripple>`