@fluid-topics/ft-switch 0.1.15 → 0.1.18

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 { 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 {
@@ -129,7 +122,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,
@@ -181,7 +174,7 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
     onSlotchange() {
         this.requestUpdate();
     }
-};
+}
 FtSwitchOption.elementDefinitions = {
     "ft-ripple": FtRipple,
     "ft-typography": FtTypography,
@@ -212,8 +205,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);
 }
@@ -27,8 +13,8 @@ export declare class FtSwitch extends FtLitElement implements FtSwitchProperties
     private selectedOption?;
     private options;
     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;