@fluid-topics/ft-switch 0.3.11 → 0.3.13

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

@@ -0,0 +1,9 @@
+export declare const FtSwitchOptionCssVariables: {
+    borderRadiusLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderRadiusRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderWidthLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderWidthRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    borderWidthVertical: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const optionStyles: import("lit").CSSResult;
+//# sourceMappingURL=ft-switch-option.css.d.ts.map

package/build/ft-switch-option.css.js

@@ -0,0 +1,101 @@
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
+import { FtIconCssVariables } from "@fluid-topics/ft-icon/build/ft-icon.css";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple/build/ft-ripple.css";
+import { FtSwitchCssVariables } from "./ft-switch.css";
+export const FtSwitchOptionCssVariables = {
+    borderRadiusLeft: FtCssVariableFactory.extend("--ft-switch-option-border-radius-left", designSystemVariables.borderRadiusL),
+    borderRadiusRight: FtCssVariableFactory.extend("--ft-switch-option-border-radius-right", designSystemVariables.borderRadiusL),
+    borderWidthLeft: FtCssVariableFactory.create("--ft-switch-option-border-width-left", "SIZE", "1px"),
+    borderWidthRight: FtCssVariableFactory.create("--ft-switch-option-border-width-right", "SIZE", "1px"),
+    borderWidthVertical: FtCssVariableFactory.create("--ft-switch-option-border-width-vertical", "SIZE", "1px"),
+};
+//language=css
+export const optionStyles = css `
+    .ft-switch-option {
+        position: relative;
+        display: inline-block;
+    }
+
+    .ft-switch-option--input {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .ft-switch-option--content {
+        --ft-switch-option-internal-line-height: calc(${FtSwitchCssVariables.fontSize} + 2px);
+        --ft-switch-option-internal-content-height: max(var(--ft-switch-option-internal-line-height), ${FtSwitchCssVariables.iconSize});
+
+        border-style: solid;
+        border-color: ${FtSwitchCssVariables.borderColor};
+        border-width: ${FtSwitchOptionCssVariables.borderWidthVertical} ${FtSwitchOptionCssVariables.borderWidthRight} ${FtSwitchOptionCssVariables.borderWidthVertical} ${FtSwitchOptionCssVariables.borderWidthLeft};
+        border-radius: ${FtSwitchOptionCssVariables.borderRadiusLeft} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusLeft};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+
+        ${setVariable(FtIconCssVariables.size, FtSwitchCssVariables.iconSize)};
+        padding: 6px 8px;
+        background-color: ${FtSwitchCssVariables.backgroundColor};
+        -webkit-mask-image: radial-gradient(white, black);
+    }
+
+    .ft-switch-option--content > *:not(ft-ripple) {
+        position: relative;
+    }
+
+    .ft-switch-option--input:checked + .ft-switch-option--content:before {
+        background-color: ${FtSwitchCssVariables.selectedBackgroundColor};
+        border-radius: ${FtSwitchOptionCssVariables.borderRadiusLeft} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusLeft};
+        position: absolute;
+        inset: 0;
+        content: "";
+        z-index: 1;
+        opacity: ${designSystemVariables.opacityPrimaryOnSurfaceSelected};
+    }
+
+    .ft-switch-option--label {
+        color: ${FtSwitchCssVariables.textColor};
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: block;
+        margin: 0 8px;
+        ${setVariable(FtTypographyButtonCssVariables.fontSize, FtSwitchCssVariables.fontSize)};
+        ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-switch-option-internal-content-height)")}
+    }
+
+    .ft-switch-option--input:checked + .ft-switch-option--content .ft-switch-option--label {
+        color: ${FtSwitchCssVariables.selectedTextColor};
+    }
+
+    .ft-switch-option--label[hidden] {
+        display: none;
+    }
+
+    .ft-switch-option--ripple {
+        ${setVariable(FtRippleCssVariables.color, FtSwitchCssVariables.rippleColor)};
+    }
+
+    ft-icon, ft-ripple, ft-typography {
+        z-index: 2;
+    }
+
+    .ft-switch-option:not(.ft-switch-option--trailing-icon) ft-icon {
+        order: -1;
+    }
+
+    ft-icon {
+        flex-shrink: 0;
+        color: ${FtSwitchCssVariables.iconColor};
+    }
+
+    .ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
+        color: ${FtSwitchCssVariables.selectedTextColor};
+    }
+`;
+//# sourceMappingURL=ft-switch-option.css.js.map

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

@@ -1,18 +1,13 @@
 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;
-    icon?: string;
-    selected: boolean;
-    trailingIcon: boolean;
-}
+import { FtSwitchOptionProperties } from "./ft-switch-option.properties";
 export declare class SwitchOptionChange extends CustomEvent<void> {
     constructor();
 }
 export declare class FtSwitchOption extends FtLitElement implements FtSwitchOptionProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    static get styles(): import("lit").CSSResult;
+    static styles: import("lit").CSSResult;
     value: any;
     icon?: string;
     label: string;

package/build/ft-switch-option.js

@@ -4,15 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, nothing } from "lit";
+import { html, nothing } from "lit";
 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 { FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
 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";
+import { FtIcon } from "@fluid-topics/ft-icon";
+import { optionStyles } from "./ft-switch-option.css";
 export class SwitchOptionChange extends CustomEvent {
     constructor() {
         super("option-change", { bubbles: true });
@@ -27,95 +27,6 @@ export class FtSwitchOption extends FtLitElement {
         this.selected = false;
         this.trailingIcon = false;
     }
-    static get styles() {
-        // language=CSS
-        return css `
-            .ft-switch-option {
-                position: relative;
-                display: inline-block;
-            }
-
-            .ft-switch-option--input {
-                position: absolute;
-                opacity: 0;
-                width: 0;
-                height: 0;
-            }
-
-            .ft-switch-option--content {
-                --ft-switch-option-internal-line-height: calc(${FtSwitchCssVariables.fontSize} + 2px);
-                --ft-switch-option-internal-content-height: max(var(--ft-switch-option-internal-line-height), ${FtSwitchCssVariables.iconSize});
-
-                border-style: solid;
-                border-color: ${FtSwitchCssVariables.borderColor};
-                border-width: ${FtSwitchOptionCssVariables.borderWidthVertical} ${FtSwitchOptionCssVariables.borderWidthRight} ${FtSwitchOptionCssVariables.borderWidthVertical} ${FtSwitchOptionCssVariables.borderWidthLeft};
-                border-radius: ${FtSwitchOptionCssVariables.borderRadiusLeft} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusLeft};
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                overflow: hidden;
-
-                ${setVariable(FtIconCssVariables.size, FtSwitchCssVariables.iconSize)};
-                padding: 6px 8px;
-                background-color: ${FtSwitchCssVariables.backgroundColor};
-                -webkit-mask-image: radial-gradient(white, black);
-            }
-
-            .ft-switch-option--content > *:not(ft-ripple) {
-                position: relative;
-            }
-
-            .ft-switch-option--input:checked + .ft-switch-option--content:before {
-                background-color: ${FtSwitchCssVariables.selectedBackgroundColor};
-                border-radius: ${FtSwitchOptionCssVariables.borderRadiusLeft} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusRight} ${FtSwitchOptionCssVariables.borderRadiusLeft};
-                position: absolute;
-                inset: 0;
-                content: "";
-                z-index: 1;
-                opacity: ${designSystemVariables.opacityPrimaryOnSurfaceSelected};
-            }
-
-            .ft-switch-option--label {
-                color: ${FtSwitchCssVariables.textColor};
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                display: block;
-                margin: 0 8px;
-                ${setVariable(FtTypographyButtonCssVariables.fontSize, FtSwitchCssVariables.fontSize)};
-                ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-switch-option-internal-content-height)")}
-            }
-
-            .ft-switch-option--input:checked + .ft-switch-option--content .ft-switch-option--label {
-                color: ${FtSwitchCssVariables.selectedTextColor};
-            }
-
-            .ft-switch-option--label[hidden] {
-                display: none;
-            }
-
-            .ft-switch-option--ripple {
-                ${setVariable(FtRippleCssVariables.color, FtSwitchCssVariables.rippleColor)};
-            }
-
-            ft-icon, ft-ripple, ft-typography {
-                z-index: 2;
-            }
-
-            .ft-switch-option:not(.ft-switch-option--trailing-icon) ft-icon {
-                order: -1;
-            }
-
-            ft-icon {
-                flex-shrink: 0;
-                color: ${FtSwitchCssVariables.iconColor};
-            }
-
-            .ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
-                color: ${FtSwitchCssVariables.selectedTextColor};
-            }
-        `;
-    }
     focus() {
         this.input.focus();
     }
@@ -184,6 +95,7 @@ FtSwitchOption.elementDefinitions = {
     "ft-tooltip": FtTooltip,
     "ft-icon": FtIcon
 };
+FtSwitchOption.styles = optionStyles;
 __decorate([
     property({ type: String })
 ], FtSwitchOption.prototype, "value", void 0);

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

@@ -0,0 +1,7 @@
+export interface FtSwitchOptionProperties {
+    value: any;
+    icon?: string;
+    selected: boolean;
+    trailingIcon: boolean;
+}
+//# sourceMappingURL=ft-switch-option.properties.d.ts.map

package/build/ft-switch-option.properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-switch-option.properties.js.map

package/build/{css-variables.d.ts → ft-switch.css.d.ts}

@@ -11,11 +11,5 @@ export declare const FtSwitchCssVariables: {
     rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     outlineColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
-export declare const FtSwitchOptionCssVariables: {
-    borderRadiusLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderRadiusRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderWidthLeft: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderWidthRight: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-    borderWidthVertical: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
-//# sourceMappingURL=css-variables.d.ts.map
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-switch.css.d.ts.map

package/build/{css-variables.js → ft-switch.css.js}

@@ -1,5 +1,7 @@
-import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
-import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
+import { css } from "lit";
+import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
+import { FtSwitchOptionCssVariables } from "./ft-switch-option.css";
 export const FtSwitchCssVariables = {
     textColor: FtCssVariableFactory.extend("--ft-switch-text-color", designSystemVariables.colorOnSurfaceHigh),
     backgroundColor: FtCssVariableFactory.extend("--ft-switch-background-color", designSystemVariables.colorSurface),
@@ -13,11 +15,35 @@ export const FtSwitchCssVariables = {
     rippleColor: FtCssVariableFactory.extend("--ft-switch-ripple-color", designSystemVariables.colorPrimary),
     outlineColor: FtCssVariableFactory.extend("--ft-switch-outline-color", designSystemVariables.colorPrimary),
 };
-export const FtSwitchOptionCssVariables = {
-    borderRadiusLeft: FtCssVariableFactory.extend("--ft-switch-option-border-radius-left", designSystemVariables.borderRadiusL),
-    borderRadiusRight: FtCssVariableFactory.extend("--ft-switch-option-border-radius-right", designSystemVariables.borderRadiusL),
-    borderWidthLeft: FtCssVariableFactory.create("--ft-switch-option-border-width-left", "SIZE", "1px"),
-    borderWidthRight: FtCssVariableFactory.create("--ft-switch-option-border-width-right", "SIZE", "1px"),
-    borderWidthVertical: FtCssVariableFactory.create("--ft-switch-option-border-width-vertical", "SIZE", "1px"),
-};
-//# sourceMappingURL=css-variables.js.map
+//language=css
+export const styles = css `
+    :host {
+        display: inline-block;
+    }
+
+    .ft-switch {
+        border-radius: ${FtSwitchCssVariables.borderRadius};
+        outline-color: ${FtSwitchCssVariables.outlineColor};
+    }
+
+    .ft-switch slot {
+        display: flex;
+        align-items: center;
+    }
+
+    .ft-switch slot::slotted(ft-switch-option) {
+        ${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, "0")};
+        ${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, "0")};
+        ${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "0")};
+    }
+
+    .ft-switch slot::slotted(ft-switch-option:first-child) {
+        ${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, FtSwitchCssVariables.borderRadius)};
+        ${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "1px")};
+    }
+
+    .ft-switch slot::slotted(ft-switch-option:last-child) {
+        ${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, FtSwitchCssVariables.borderRadius)};
+    }
+`;
+//# sourceMappingURL=ft-switch.css.js.map

package/build/ft-switch.d.ts

@@ -1,8 +1,6 @@
 import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtLitElement } from "@fluid-topics/ft-wc-utils";
-export interface FtSwitchProperties {
-    value?: string;
-}
+import { FtSwitchProperties } from "./ft-switch.properties";
 export declare class FtSwitchChange extends CustomEvent<any> {
     constructor(value: any);
 }
@@ -14,7 +12,7 @@ export declare class FtSwitch extends FtLitElement implements FtSwitchProperties
     private options;
     private ftSwitchDiv;
     protected updated(props: PropertyValues<any>): void;
-    static get styles(): import("lit").CSSResult;
+    static styles: import("lit").CSSResult;
     protected render(): import("lit-html").TemplateResult<1>;
     private onKeyDown;
     private fixIndex;

package/build/ft-switch.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from "lit";
+import { html } from "lit";
 import { query, state } from "lit/decorators.js";
-import { FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
+import { FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { FtSwitchOption } from "./ft-switch-option";
-import { FtSwitchCssVariables, FtSwitchOptionCssVariables } from "./css-variables";
+import { styles } from "./ft-switch.css";
 export class FtSwitchChange extends CustomEvent {
     constructor(value) {
         super("change", { detail: value });
@@ -31,39 +31,6 @@ export class FtSwitch extends FtLitElement {
             this.dispatchEvent(new FtSwitchChange((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value));
         }
     }
-    static get styles() {
-        // language=CSS
-        return css `
-            :host {
-                display: inline-block;
-            }
-
-            .ft-switch {
-                border-radius: ${FtSwitchCssVariables.borderRadius};
-                outline-color: ${FtSwitchCssVariables.outlineColor};
-            }
-
-            .ft-switch slot {
-                display: flex;
-                align-items: center;
-            }
-
-            .ft-switch slot::slotted(ft-switch-option) {
-                ${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, "0")};
-                ${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, "0")};
-                ${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "0")};
-            }
-
-            .ft-switch slot::slotted(ft-switch-option:first-child) {
-                ${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, FtSwitchCssVariables.borderRadius)};
-                ${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "1px")};
-            }
-
-            .ft-switch slot::slotted(ft-switch-option:last-child) {
-                ${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, FtSwitchCssVariables.borderRadius)};
-            }
-        `;
-    }
     render() {
         return html `
             <div class="ft-switch" @keydown=${this.onKeyDown} tabindex="0">
@@ -127,6 +94,7 @@ export class FtSwitch extends FtLitElement {
     }
 }
 FtSwitch.elementDefinitions = {};
+FtSwitch.styles = styles;
 __decorate([
     query(".ft-switch slot")
 ], FtSwitch.prototype, "slottedContent", void 0);