@fluid-topics/ft-switch 0.1.8 → 0.1.9

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

@@ -1,7 +1,8 @@
+import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 import { Position } from "@fluid-topics/ft-tooltip";
 export interface FtSwitchOptionProperties {
-    value: string;
+    value: any;
     icon?: string;
     selected: boolean;
     trailingIcon: boolean;
@@ -13,28 +14,22 @@ export declare const FtSwitchOptionCssVariables: {
     borderWidthRight: FtCssVariable;
     borderWidthVertical: FtCssVariable;
 };
-export declare class SwitchOptionSelected extends CustomEvent<void> {
+export declare class SwitchOptionChange extends CustomEvent<void> {
     constructor();
 }
 export declare class FtSwitchOption extends FtLitElement implements FtSwitchOptionProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-        customElements?: CustomElementRegistry | undefined;
-    };
     protected getStyles(): import("lit").CSSResult;
-    value: string;
+    value: any;
     icon?: string;
     label: string;
     tooltipPosition: Position;
     selected: boolean;
     trailingIcon: boolean;
-    name: string;
     private slottedContent?;
     private input;
     focus(): void;
+    protected updated(props: PropertyValues<any>): void;
     protected getTemplate(): import("lit-html").TemplateResult<1>;
     private addTooltip;
     private onChange;

package/build/ft-switch-option.js

@@ -4,7 +4,7 @@ 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, LitElement, nothing } from "lit";
+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 { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
@@ -20,9 +20,9 @@ export const FtSwitchOptionCssVariables = {
     borderWidthRight: FtCssVariable.create("--ft-switch-option-border-width-right", "SIZE", "1px"),
     borderWidthVertical: FtCssVariable.create("--ft-switch-option-border-width-vertical", "SIZE", "1px"),
 };
-export class SwitchOptionSelected extends CustomEvent {
+export class SwitchOptionChange extends CustomEvent {
     constructor() {
-        super("selected");
+        super("option-change", { bubbles: true });
     }
 }
 let FtSwitchOption = class FtSwitchOption extends FtLitElement {
@@ -33,7 +33,6 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
         this.tooltipPosition = "bottom";
         this.selected = false;
         this.trailingIcon = false;
-        this.name = "";
     }
     getStyles() {
         // language=CSS
@@ -79,16 +78,6 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
                 opacity: ${designSystemVariables.opacityPrimaryOnSurfaceSelected};
             }
 
-            .ft-switch-option--input:focus + .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.opacityPrimaryOnSurfaceFocused};
-            }
-
             .ft-switch-option--label {
                 color: ${FtSwitchCssVariables.textColor};
                 overflow: hidden;
@@ -134,6 +123,12 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
     focus() {
         this.input.focus();
     }
+    updated(props) {
+        super.updated(props);
+        if (props.has("selected")) {
+            this.dispatchEvent(new SwitchOptionChange());
+        }
+    }
     getTemplate() {
         const classes = {
             "ft-switch-option": true,
@@ -143,8 +138,6 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
             <label for="input" class=${classMap(classes)}>
                 <input id="input" type="radio" class="ft-switch-option--input"
                        .checked=${this.selected}
-                       .value=${this.value}
-                       .name=${this.name}
                        @change=${this.onChange}>
                 <div class="ft-switch-option--content">
                     <ft-ripple part="ripple" class="ft-switch-option--ripple"></ft-ripple>
@@ -168,7 +161,6 @@ let FtSwitchOption = class FtSwitchOption extends FtLitElement {
     }
     onChange() {
         this.selected = true;
-        this.dispatchEvent(new SwitchOptionSelected());
     }
     getLabel() {
         return this.label || this.textContent;
@@ -196,7 +188,6 @@ FtSwitchOption.elementDefinitions = {
     "ft-tooltip": FtTooltip,
     "mwc-icon": Icon
 };
-FtSwitchOption.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 __decorate([
     property({ type: String })
 ], FtSwitchOption.prototype, "value", void 0);
@@ -215,9 +206,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], FtSwitchOption.prototype, "trailingIcon", void 0);
-__decorate([
-    property({ attribute: false })
-], FtSwitchOption.prototype, "name", void 0);
 __decorate([
     query(".ft-switch-option--content slot")
 ], FtSwitchOption.prototype, "slottedContent", void 0);

package/build/ft-switch.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from "lit";
 import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
 export * from "./ft-switch-option";
 export interface FtSwitchProperties {
@@ -14,25 +15,25 @@ export declare const FtSwitchCssVariables: {
     iconSize: FtCssVariable;
     iconColor: FtCssVariable;
     rippleColor: FtCssVariable;
+    outlineColor: FtCssVariable;
 };
-export declare class FtSwitchChange extends CustomEvent<string> {
-    constructor(value: string);
+export declare class FtSwitchChange extends CustomEvent<any> {
+    constructor(value: any);
 }
 export declare class FtSwitch extends FtLitElement implements FtSwitchProperties {
     static elementDefinitions: ElementDefinitionsMap;
-    constructor();
-    get value(): string | undefined;
+    get value(): any;
     private slottedContent?;
     private selectedOption?;
     private options;
-    private groupName;
+    protected updated(props: PropertyValues<any>): void;
     protected getStyles(): import("lit").CSSResult;
     protected getTemplate(): import("lit-html").TemplateResult<1>;
     private onKeyDown;
-    private onFocus;
+    private fixIndex;
     private onSlotchange;
     private registerOption;
-    private selectOption;
+    private onOptionChange;
     private updateOptions;
 }
 //# sourceMappingURL=ft-switch.d.ts.map

package/build/ft-switch.js

@@ -5,8 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { css, html } from "lit";
-import { query } from "lit/decorators.js";
-import { v4 as uuidv4 } from "uuid";
+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";
@@ -22,6 +21,7 @@ export const FtSwitchCssVariables = {
     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 class FtSwitchChange extends CustomEvent {
     constructor(value) {
@@ -30,15 +30,21 @@ export class FtSwitchChange extends CustomEvent {
 }
 let FtSwitch = class FtSwitch extends FtLitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.options = [];
-        this.groupName = uuidv4();
-        this.addEventListener("keydown", (e) => this.onKeyDown(e));
     }
     get value() {
         var _a;
         return (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value;
     }
+    updated(props) {
+        var _a;
+        super.updated(props);
+        if (props.has("selectedOption")) {
+            this.updateOptions();
+            this.dispatchEvent(new FtSwitchChange((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value));
+        }
+    }
     getStyles() {
         // language=CSS
         return css `
@@ -46,6 +52,11 @@ let FtSwitch = class FtSwitch extends FtLitElement {
                 display: inline-block;
             }
 
+            .ft-switch {
+                border-radius: ${FtSwitchCssVariables.borderRadius};
+                outline-color: ${FtSwitchCssVariables.outlineColor};
+            }
+
             .ft-switch slot {
                 display: flex;
                 align-items: center;
@@ -69,61 +80,56 @@ let FtSwitch = class FtSwitch extends FtLitElement {
     }
     getTemplate() {
         return html `
-            <div class="ft-switch">
-                <slot @slotchange=${this.onSlotchange}></slot>
+            <div class="ft-switch" @keydown=${this.onKeyDown} tabindex="0">
+                <slot @slotchange=${this.onSlotchange}
+                      @option-change=${this.onOptionChange}></slot>
             </div>
         `;
     }
     onKeyDown(e) {
-        let focusedOption = this.options.find(option => option.ownerDocument.activeElement == option);
-        if (focusedOption) {
-            if (e.key == "ArrowDown" || e.key == "ArrowRight") {
-                let optionIndex = this.options.indexOf(focusedOption);
-                if (optionIndex < this.options.length - 1) {
-                    optionIndex++;
-                }
-                e.preventDefault();
-                this.selectOption(this.options[optionIndex]);
-            }
-            if (e.key == "ArrowUp" || e.key == "ArrowLeft") {
-                let optionIndex = this.options.indexOf(focusedOption);
-                if (optionIndex > 0) {
-                    optionIndex--;
-                }
-                e.preventDefault();
-                this.selectOption(this.options[optionIndex]);
-            }
+        let newIndex = undefined;
+        if (e.key == "ArrowDown" || e.key == "ArrowRight") {
+            newIndex = this.selectedOption ? this.options.indexOf(this.selectedOption) + 1 : 0;
+        }
+        if (e.key == "ArrowUp" || e.key == "ArrowLeft") {
+            newIndex = this.selectedOption ? this.options.indexOf(this.selectedOption) - 1 : this.options.length - 1;
+        }
+        if (newIndex != undefined) {
+            e.preventDefault();
+            this.options[this.fixIndex(newIndex)].selected = true;
         }
     }
-    onFocus(option) {
-        if (this.selectedOption && this.selectedOption != option) {
-            this.selectedOption.focus();
+    fixIndex(index) {
+        if (index < 0) {
+            return this.options.length - 1;
+        }
+        if (index > this.options.length - 1) {
+            return 0;
         }
+        return index;
     }
     onSlotchange() {
         var _a;
         this.options = [];
-        return (_a = this.slottedContent) === null || _a === void 0 ? void 0 : _a.assignedElements().forEach(element => {
+        (_a = this.slottedContent) === null || _a === void 0 ? void 0 : _a.assignedElements().forEach(element => {
             if (element instanceof FtSwitchOption) {
                 this.registerOption(element);
             }
-            this.updateOptions();
         });
+        this.selectedOption = this.options.find(option => option.selected);
     }
     registerOption(option) {
-        option.name = this.groupName;
-        option.addEventListener("selected", () => this.selectOption(option));
-        option.addEventListener("focus", () => this.onFocus(option));
+        option.setAttribute("tabindex", "-1");
+        this.options.push(option);
+    }
+    onOptionChange(e) {
+        let option = e.target;
         if (option.selected) {
             this.selectedOption = option;
         }
-        this.options.push(option);
-    }
-    selectOption(option) {
-        this.selectedOption = option;
-        option.focus();
-        this.dispatchEvent(new FtSwitchChange(this.selectedOption.value));
-        this.updateOptions();
+        else {
+            this.selectedOption = this.options.find(option => option.selected);
+        }
     }
     updateOptions() {
         this.options.forEach(option => {
@@ -135,6 +141,9 @@ FtSwitch.elementDefinitions = {};
 __decorate([
     query(".ft-switch slot")
 ], FtSwitch.prototype, "slottedContent", void 0);
+__decorate([
+    state()
+], FtSwitch.prototype, "selectedOption", void 0);
 FtSwitch = __decorate([
     customElement("ft-switch")
 ], FtSwitch);