@fluid-topics/ft-switch 0.1.18 → 0.2.2

package/build/ft-switch-option.js

@@ -9,9 +9,9 @@ import { property, query } from "lit/decorators.js";
 import { designSystemVariables, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
 import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
 import { FtTypography, FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
-import { Icon } from "@material/mwc-icon";
 import { classMap } from "lit/directives/class-map.js";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
+import { FtIcon, FtIconCssVariables } from "@fluid-topics/ft-icon";
 import { FtSwitchCssVariables, FtSwitchOptionCssVariables } from "./css-variables";
 export class SwitchOptionChange extends CustomEvent {
     constructor() {
@@ -55,7 +55,7 @@ export class FtSwitchOption extends FtLitElement {
                 justify-content: center;
                 overflow: hidden;
 
-                --mdc-icon-size: ${FtSwitchCssVariables.iconSize};
+                ${setVariable(FtIconCssVariables.size, FtSwitchCssVariables.iconSize)};
                 padding: 6px 8px;
                 background-color: ${FtSwitchCssVariables.backgroundColor};
                 -webkit-mask-image: radial-gradient(white, black);
@@ -94,21 +94,20 @@ export class FtSwitchOption extends FtLitElement {
                 ${setVariable(FtRippleCssVariables.color, FtSwitchCssVariables.rippleColor)};
             }
 
-            mwc-icon, ft-ripple, ft-typography {
+            ft-icon, ft-ripple, ft-typography {
                 z-index: 2;
             }
 
-            .ft-switch-option:not(.ft-switch-option--trailing-icon) mwc-icon {
+            .ft-switch-option:not(.ft-switch-option--trailing-icon) ft-icon {
                 order: -1;
             }
 
-            mwc-icon {
+            ft-icon {
                 flex-shrink: 0;
-                width: var(--mdc-icon-size);
                 color: ${FtSwitchCssVariables.iconColor};
             }
 
-            .ft-switch-option--input:checked + .ft-switch-option--content mwc-icon {
+            .ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
                 color: ${FtSwitchCssVariables.selectedTextColor};
             }
         `;
@@ -161,7 +160,7 @@ export class FtSwitchOption extends FtLitElement {
     resolveIcon() {
         return this.icon
             ? html `
-                    <mwc-icon>${this.icon}</mwc-icon> `
+                    <ft-icon variant="material">${this.icon}</ft-icon> `
             : nothing;
     }
     get textContent() {
@@ -179,7 +178,7 @@ FtSwitchOption.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-tooltip": FtTooltip,
-    "mwc-icon": Icon
+    "ft-icon": FtIcon
 };
 __decorate([
     property({ type: String })

package/build/ft-switch.d.ts

@@ -12,6 +12,7 @@ export declare class FtSwitch extends FtLitElement implements FtSwitchProperties
     private slottedContent?;
     private selectedOption?;
     private options;
+    private ftSwitchDiv;
     protected updated(props: PropertyValues<any>): void;
     static get styles(): import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
@@ -20,6 +21,7 @@ export declare class FtSwitch extends FtLitElement implements FtSwitchProperties
     private onSlotchange;
     private registerOption;
     private onOptionChange;
+    focus(): void;
     private updateOptions;
 }
 //# sourceMappingURL=ft-switch.d.ts.map