feat(core/toggle): migrate to shadow dom

BREAKING_CHANGES.md

@@ -2,6 +2,10 @@
 
 ## v2.0.0
 
+### `ix-toggle` changed host styling
+
+`ix-toggle` is now `display: inline-flex` instead of `display: flex`
+
 ### `ix-group-dropdown-item` removed
 
 Replaced with standard `ix-dropdown-item`

packages/angular/src/components.ts

@@ -2019,14 +2019,14 @@ export declare interface IxToastContainer extends Components.IxToastContainer {}
 
 
 @ProxyCmp({
-  inputs: ['checked', 'color', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
+  inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
 })
 @Component({
   selector: 'ix-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['checked', 'color', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'],
+  inputs: ['checked', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn'],
 })
 export class IxToggle {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -10159,7 +10159,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
@@ -10181,29 +10181,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "color",
-          "type": "string",
-          "mutable": false,
-          "attr": "color",
-          "reflectToAttr": false,
-          "docs": "Basic and status colors from color palette",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0"
-            }
-          ],
-          "default": "'accent'",
-          "deprecation": "Will be removed in 2.0.0",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "disabled",
           "type": "boolean",
@@ -10241,9 +10218,9 @@
         {
           "name": "indeterminate",
           "type": "boolean",
-          "mutable": false,
+          "mutable": true,
           "attr": "indeterminate",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "If true the control is in indeterminate state",
           "docsTags": [],
           "default": "false",
@@ -10322,14 +10299,7 @@
       "styles": [],
       "slots": [],
       "parts": [],
-      "listeners": [
-        {
-          "event": "keydown",
-          "target": "window",
-          "capture": false,
-          "passive": false
-        }
-      ]
+      "listeners": []
     },
     {
       "dirPath": "./src/components/tooltip",

packages/core/src/components.d.ts

@@ -1769,11 +1769,6 @@ export namespace Components {
           * Whether the slide-toggle element is checked or not.
          */
         "checked": boolean;
-        /**
-          * Basic and status colors from color palette
-          * @deprecated Will be removed in 2.0.0
-         */
-        "color": string;
         /**
           * Whether the slide-toggle element is disabled or not.
          */
@@ -4745,11 +4740,6 @@ declare namespace LocalJSX {
           * Whether the slide-toggle element is checked or not.
          */
         "checked"?: boolean;
-        /**
-          * Basic and status colors from color palette
-          * @deprecated Will be removed in 2.0.0
-         */
-        "color"?: string;
         /**
           * Whether the slide-toggle element is disabled or not.
          */

packages/core/src/components/toggle/test/toggle.ct.ts

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('renders', async ({ mount, page }) => {
+  await mount(`<ix-toggle></ix-toggle>`);
+  const drawer = page.locator('ix-toggle');
+  await expect(drawer).toHaveClass(/hydrated/);
+  await expect(drawer).toBeVisible();
+});
+
+test('should toggle', async ({ mount, page }) => {
+  await mount(`<ix-toggle></ix-toggle>`);
+  const toggle = page.locator('ix-toggle');
+  await expect(toggle).toHaveClass(/hydrated/);
+  await toggle.click();
+
+  const input = toggle.locator('input');
+  await expect(input).toBeChecked();
+});
+
+test('should not toggle if disabled', async ({ mount, page }) => {
+  await mount(`<ix-toggle disabled></ix-toggle>`);
+  const toggle = page.locator('ix-toggle');
+  await expect(toggle).toHaveClass(/hydrated/);
+  await toggle.click({
+    force: true,
+  });
+
+  const input = toggle.locator('input');
+  await expect(input).not.toBeChecked();
+});
+
+test('should be toggled ON after indeterminate', async ({ mount, page }) => {
+  await mount(`<ix-toggle indeterminate></ix-toggle>`);
+  const toggle = page.locator('ix-toggle');
+  await expect(toggle).toHaveClass(/hydrated/);
+  const input = toggle.locator('input');
+  await expect(input).not.toBeChecked();
+
+  await toggle.click();
+
+  await expect(input).toBeChecked();
+});