@fluid-topics/ft-switch 0.1.17 → 0.2.1

package/build/css-variables.d.ts

@@ -0,0 +1,22 @@
+import { FtCssVariable } from "@fluid-topics/ft-wc-utils";
+export declare const FtSwitchCssVariables: {
+    textColor: FtCssVariable;
+    backgroundColor: FtCssVariable;
+    selectedTextColor: FtCssVariable;
+    selectedBackgroundColor: FtCssVariable;
+    borderColor: FtCssVariable;
+    borderRadius: FtCssVariable;
+    fontSize: FtCssVariable;
+    iconSize: FtCssVariable;
+    iconColor: FtCssVariable;
+    rippleColor: FtCssVariable;
+    outlineColor: FtCssVariable;
+};
+export declare const FtSwitchOptionCssVariables: {
+    borderRadiusLeft: FtCssVariable;
+    borderRadiusRight: FtCssVariable;
+    borderWidthLeft: FtCssVariable;
+    borderWidthRight: FtCssVariable;
+    borderWidthVertical: FtCssVariable;
+};
+//# sourceMappingURL=css-variables.d.ts.map

package/build/css-variables.js

@@ -0,0 +1,23 @@
+import { designSystemVariables, FtCssVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
+export const FtSwitchCssVariables = {
+    textColor: FtCssVariable.extend("--ft-switch-text-color", designSystemVariables.colorOnSurfaceHigh),
+    backgroundColor: FtCssVariable.extend("--ft-switch-background-color", designSystemVariables.colorSurface),
+    selectedTextColor: FtCssVariable.extend("--ft-switch-selected-text-color", designSystemVariables.colorPrimary),
+    selectedBackgroundColor: FtCssVariable.extend("--ft-switch-selected-background-color", designSystemVariables.colorPrimary),
+    borderColor: FtCssVariable.extend("--ft-switch-border-color", designSystemVariables.colorOutline),
+    borderRadius: FtCssVariable.extend("--ft-switch-border-radius", designSystemVariables.borderRadiusL),
+    fontSize: FtCssVariable.extend("--ft-switch-font-size", FtTypographyButtonCssVariables.fontSize),
+    iconSize: FtCssVariable.create("--ft-switch-icon-size", "SIZE", "24px"),
+    iconColor: FtCssVariable.extend("--ft-switch-text-color", designSystemVariables.colorOnSurfaceMedium),
+    rippleColor: FtCssVariable.extend("--ft-switch-ripple-color", designSystemVariables.colorPrimary),
+    outlineColor: FtCssVariable.extend("--ft-switch-outline-color", designSystemVariables.colorPrimary),
+};
+export const FtSwitchOptionCssVariables = {
+    borderRadiusLeft: FtCssVariable.extend("--ft-switch-option-border-radius-left", designSystemVariables.borderRadiusL),
+    borderRadiusRight: FtCssVariable.extend("--ft-switch-option-border-radius-right", designSystemVariables.borderRadiusL),
+    borderWidthLeft: FtCssVariable.create("--ft-switch-option-border-width-left", "SIZE", "1px"),
+    borderWidthRight: FtCssVariable.create("--ft-switch-option-border-width-right", "SIZE", "1px"),
+    borderWidthVertical: FtCssVariable.create("--ft-switch-option-border-width-vertical", "SIZE", "1px"),
+};
+//# sourceMappingURL=css-variables.js.map

package/build/ft-switch-option.d.ts

@@ -1,5 +1,5 @@
-import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { HTMLTemplateResult, PropertyValues } from "lit";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { Position } from "@fluid-topics/ft-tooltip";
 export interface FtSwitchOptionProperties {
     value: any;
@@ -7,19 +7,12 @@ export interface FtSwitchOptionProperties {
     selected: boolean;
     trailingIcon: boolean;
 }
-export declare const FtSwitchOptionCssVariables: {
-    borderRadiusLeft: FtCssVariable;
-    borderRadiusRight: FtCssVariable;
-    borderWidthLeft: FtCssVariable;
-    borderWidthRight: FtCssVariable;
-    borderWidthVertical: FtCssVariable;
-};
 export declare class SwitchOptionChange extends CustomEvent<void> {
     constructor();
 }
 export declare class FtSwitchOption extends FtLitElement implements FtSwitchOptionProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    protected getStyles(): import("lit").CSSResult;
+    static get styles(): import("lit").CSSResult;
     value: any;
     icon?: string;
     label: string;
@@ -30,7 +23,7 @@ export declare class FtSwitchOption extends FtLitElement implements FtSwitchOpti
     private input;
     focus(): void;
     protected updated(props: PropertyValues<any>): void;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    protected render(): HTMLTemplateResult;
     private addTooltip;
     private onChange;
     private getLabel;

package/build/ft-switch-option.js

@@ -6,26 +6,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, nothing } from "lit";
 import { property, query } from "lit/decorators.js";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+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 { FtSwitchCssVariables } from "./ft-switch";
 import { FtTooltip } from "@fluid-topics/ft-tooltip";
-export const FtSwitchOptionCssVariables = {
-    borderRadiusLeft: FtCssVariable.extend("--ft-switch-option-border-radius-left", designSystemVariables.borderRadiusL),
-    borderRadiusRight: FtCssVariable.extend("--ft-switch-option-border-radius-right", designSystemVariables.borderRadiusL),
-    borderWidthLeft: FtCssVariable.create("--ft-switch-option-border-width-left", "SIZE", "1px"),
-    borderWidthRight: FtCssVariable.create("--ft-switch-option-border-width-right", "SIZE", "1px"),
-    borderWidthVertical: FtCssVariable.create("--ft-switch-option-border-width-vertical", "SIZE", "1px"),
-};
+import { FtIcon, FtIconCssVariables } from "@fluid-topics/ft-icon";
+import { FtSwitchCssVariables, FtSwitchOptionCssVariables } from "./css-variables";
 export class SwitchOptionChange extends CustomEvent {
     constructor() {
         super("option-change", { bubbles: true });
     }
 }
-let FtSwitchOption = class FtSwitchOption extends FtLitElement {
+export class FtSwitchOption extends FtLitElement {
     constructor() {
         super(...arguments);
         this.value = "";
@@ -34,7 +27,7 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
         this.selected = false;
         this.trailingIcon = false;
     }
-    getStyles() {
+    static get styles() {
         // language=CSS
         return css `
             .ft-switch-option {
@@ -62,7 +55,7 @@ let FtSwitchOption = 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);
@@ -101,21 +94,20 @@ let FtSwitchOption = 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};
             }
         `;
@@ -129,7 +121,7 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
             this.dispatchEvent(new SwitchOptionChange());
         }
     }
-    getTemplate() {
+    render() {
         const classes = {
             "ft-switch-option": true,
             "ft-switch-option--trailing-icon": this.trailingIcon,
@@ -168,7 +160,7 @@ let FtSwitchOption = 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() {
@@ -181,12 +173,12 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
     onSlotchange() {
         this.requestUpdate();
     }
-};
+}
 FtSwitchOption.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
     "ft-tooltip": FtTooltip,
-    "mwc-icon": Icon
+    "ft-icon": FtIcon
 };
 __decorate([
     property({ type: String })
@@ -212,8 +204,4 @@ __decorate([
 __decorate([
     query(".ft-switch-option--input")
 ], FtSwitchOption.prototype, "input", void 0);
-FtSwitchOption = __decorate([
-    customElement("ft-switch-option")
-], FtSwitchOption);
-export { FtSwitchOption };
 //# sourceMappingURL=ft-switch-option.js.map

package/build/ft-switch.d.ts

@@ -1,22 +1,8 @@
 import { PropertyValues } from "lit";
-import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export * from "./ft-switch-option";
+import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
 export interface FtSwitchProperties {
     value?: string;
 }
-export declare const FtSwitchCssVariables: {
-    textColor: FtCssVariable;
-    backgroundColor: FtCssVariable;
-    selectedTextColor: FtCssVariable;
-    selectedBackgroundColor: FtCssVariable;
-    borderColor: FtCssVariable;
-    borderRadius: FtCssVariable;
-    fontSize: FtCssVariable;
-    iconSize: FtCssVariable;
-    iconColor: FtCssVariable;
-    rippleColor: FtCssVariable;
-    outlineColor: FtCssVariable;
-};
 export declare class FtSwitchChange extends CustomEvent<any> {
     constructor(value: any);
 }
@@ -26,14 +12,16 @@ export declare class FtSwitch extends FtLitElement implements FtSwitchProperties
     private slottedContent?;
     private selectedOption?;
     private options;
+    private ftSwitchDiv;
     protected updated(props: PropertyValues<any>): void;
-    protected getStyles(): import("lit").CSSResult;
-    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    static get styles(): import("lit").CSSResult;
+    protected render(): import("lit-html").TemplateResult<1>;
     private onKeyDown;
     private fixIndex;
     private onSlotchange;
     private registerOption;
     private onOptionChange;
+    focus(): void;
     private updateOptions;
 }
 //# sourceMappingURL=ft-switch.d.ts.map