@fluid-topics/ft-switch 0.1.16 → 0.2.0

package/build/ft-switch.js

@@ -6,29 +6,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html } from "lit";
 import { query, state } from "lit/decorators.js";
-import { customElement, designSystemVariables, FtCssVariable, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
-import { FtSwitchOption, FtSwitchOptionCssVariables } from "./ft-switch-option";
-import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
-export * from "./ft-switch-option";
-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),
-};
+import { FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtSwitchOption } from "./ft-switch-option";
+import { FtSwitchCssVariables, FtSwitchOptionCssVariables } from "./css-variables";
 export class FtSwitchChange extends CustomEvent {
     constructor(value) {
         super("change", { detail: value });
     }
 }
-let FtSwitch = class FtSwitch extends FtLitElement {
+export class FtSwitch extends FtLitElement {
     constructor() {
         super(...arguments);
         this.options = [];
@@ -45,7 +31,7 @@ let FtSwitch = class FtSwitch extends FtLitElement {
             this.dispatchEvent(new FtSwitchChange((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value));
         }
     }
-    getStyles() {
+    static get styles() {
         // language=CSS
         return css `
             :host {
@@ -78,7 +64,7 @@ let FtSwitch = class FtSwitch extends FtLitElement {
             }
         `;
     }
-    getTemplate() {
+    render() {
         return html `
             <div class="ft-switch" @keydown=${this.onKeyDown} tabindex="0">
                 <slot @slotchange=${this.onSlotchange}
@@ -136,7 +122,7 @@ let FtSwitch = class FtSwitch extends FtLitElement {
             option.selected = option == this.selectedOption;
         });
     }
-};
+}
 FtSwitch.elementDefinitions = {};
 __decorate([
     query(".ft-switch slot")
@@ -144,8 +130,4 @@ __decorate([
 __decorate([
     state()
 ], FtSwitch.prototype, "selectedOption", void 0);
-FtSwitch = __decorate([
-    customElement("ft-switch")
-], FtSwitch);
-export { FtSwitch };
 //# sourceMappingURL=ft-switch.js.map