@fluid-topics/ft-switch 0.1.8

package/README.md

@@ -0,0 +1,22 @@
+two-state
+
+## Install
+
+```shell
+npm install @fluid-topics/ft-switch
+yarn add @fluid-topics/ft-switch
+```
+
+## Usage
+
+```typescript
+import { html } from "lit"
+import "@fluid-topics/ft-switch"
+
+function render() {
+    return html` <ft-switch>
+        <ft-switch-option value="on">on</ft-switch-option>
+        <ft-switch-option value="off">off</ft-switch-option>
+    </ft-switch>`
+}
+```

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

@@ -0,0 +1,47 @@
+import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { Position } from "@fluid-topics/ft-tooltip";
+export interface FtSwitchOptionProperties {
+    value: string;
+    icon?: string;
+    selected: boolean;
+    trailingIcon: boolean;
+}
+export declare const FtSwitchOptionCssVariables: {
+    borderRadiusLeft: FtCssVariable;
+    borderRadiusRight: FtCssVariable;
+    borderWidthLeft: FtCssVariable;
+    borderWidthRight: FtCssVariable;
+    borderWidthVertical: FtCssVariable;
+};
+export declare class SwitchOptionSelected 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;
+    icon?: string;
+    label: string;
+    tooltipPosition: Position;
+    selected: boolean;
+    trailingIcon: boolean;
+    name: string;
+    private slottedContent?;
+    private input;
+    focus(): void;
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    private addTooltip;
+    private onChange;
+    private getLabel;
+    private resolveIcon;
+    get textContent(): string;
+    private hasTextContent;
+    private onSlotchange;
+}
+//# sourceMappingURL=ft-switch-option.d.ts.map

package/build/ft-switch-option.js

@@ -0,0 +1,231 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { 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";
+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"),
+};
+export class SwitchOptionSelected extends CustomEvent {
+    constructor() {
+        super("selected");
+    }
+}
+let FtSwitchOption = class FtSwitchOption extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = "";
+        this.label = "";
+        this.tooltipPosition = "bottom";
+        this.selected = false;
+        this.trailingIcon = false;
+        this.name = "";
+    }
+    getStyles() {
+        // 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;
+
+                --mdc-icon-size: ${FtSwitchCssVariables.iconSize};
+                padding: 6px 8px;
+                background-color: ${FtSwitchCssVariables.backgroundColor};
+                -webkit-mask-image: radial-gradient(white, black);
+            }
+
+            .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--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;
+                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)};
+            }
+
+            mwc-icon, ft-ripple, ft-typography {
+                z-index: 2;
+            }
+
+            .ft-switch-option:not(.ft-switch-option--trailing-icon) mwc-icon {
+                order: -1;
+            }
+
+            mwc-icon {
+                flex-shrink: 0;
+                width: var(--mdc-icon-size);
+                color: ${FtSwitchCssVariables.iconColor};
+            }
+
+            .ft-switch-option--input:checked + .ft-switch-option--content mwc-icon {
+                color: ${FtSwitchCssVariables.selectedTextColor};
+            }
+        `;
+    }
+    focus() {
+        this.input.focus();
+    }
+    getTemplate() {
+        const classes = {
+            "ft-switch-option": true,
+            "ft-switch-option--trailing-icon": this.trailingIcon,
+        };
+        return this.addTooltip(html `
+            <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>
+                    <ft-typography variant="button" ?hidden=${!this.hasTextContent()}
+                                   class="ft-switch-option--label">
+                        <slot @slotchange=${this.onSlotchange}></slot>
+                    </ft-typography>
+                    ${this.resolveIcon()}
+                </div>
+            </label>
+        `);
+    }
+    addTooltip(label) {
+        return this.hasTextContent() || this.getLabel().trim().length === 0 ? label : html `
+            <ft-tooltip part="tooltip"
+                        text="${this.getLabel()}"
+                        position="${this.tooltipPosition}">
+                ${label}
+            </ft-tooltip>
+        `;
+    }
+    onChange() {
+        this.selected = true;
+        this.dispatchEvent(new SwitchOptionSelected());
+    }
+    getLabel() {
+        return this.label || this.textContent;
+    }
+    resolveIcon() {
+        return this.icon
+            ? html `
+                    <mwc-icon>${this.icon}</mwc-icon> `
+            : nothing;
+    }
+    get textContent() {
+        var _a, _b;
+        return (_b = (_a = this.slottedContent) === null || _a === void 0 ? void 0 : _a.assignedNodes().map(n => n.textContent).join("").trim()) !== null && _b !== void 0 ? _b : "";
+    }
+    hasTextContent() {
+        return this.textContent.length > 0;
+    }
+    onSlotchange() {
+        this.requestUpdate();
+    }
+};
+FtSwitchOption.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography,
+    "ft-tooltip": FtTooltip,
+    "mwc-icon": Icon
+};
+FtSwitchOption.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+__decorate([
+    property({ type: String })
+], FtSwitchOption.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], FtSwitchOption.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], FtSwitchOption.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FtSwitchOption.prototype, "tooltipPosition", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FtSwitchOption.prototype, "selected", void 0);
+__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);
+__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

@@ -0,0 +1,38 @@
+import { ElementDefinitionsMap, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+export * from "./ft-switch-option";
+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;
+};
+export declare class FtSwitchChange extends CustomEvent<string> {
+    constructor(value: string);
+}
+export declare class FtSwitch extends FtLitElement implements FtSwitchProperties {
+    static elementDefinitions: ElementDefinitionsMap;
+    constructor();
+    get value(): string | undefined;
+    private slottedContent?;
+    private selectedOption?;
+    private options;
+    private groupName;
+    protected getStyles(): import("lit").CSSResult;
+    protected getTemplate(): import("lit-html").TemplateResult<1>;
+    private onKeyDown;
+    private onFocus;
+    private onSlotchange;
+    private registerOption;
+    private selectOption;
+    private updateOptions;
+}
+//# sourceMappingURL=ft-switch.d.ts.map

package/build/ft-switch.js

@@ -0,0 +1,142 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { query } from "lit/decorators.js";
+import { v4 as uuidv4 } from "uuid";
+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),
+};
+export class FtSwitchChange extends CustomEvent {
+    constructor(value) {
+        super("change", { detail: value });
+    }
+}
+let FtSwitch = class FtSwitch extends FtLitElement {
+    constructor() {
+        super();
+        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;
+    }
+    getStyles() {
+        // language=CSS
+        return css `
+            :host {
+                display: inline-block;
+            }
+
+            .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)};
+            }
+        `;
+    }
+    getTemplate() {
+        return html `
+            <div class="ft-switch">
+                <slot @slotchange=${this.onSlotchange}></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]);
+            }
+        }
+    }
+    onFocus(option) {
+        if (this.selectedOption && this.selectedOption != option) {
+            this.selectedOption.focus();
+        }
+    }
+    onSlotchange() {
+        var _a;
+        this.options = [];
+        return (_a = this.slottedContent) === null || _a === void 0 ? void 0 : _a.assignedElements().forEach(element => {
+            if (element instanceof FtSwitchOption) {
+                this.registerOption(element);
+            }
+            this.updateOptions();
+        });
+    }
+    registerOption(option) {
+        option.name = this.groupName;
+        option.addEventListener("selected", () => this.selectOption(option));
+        option.addEventListener("focus", () => this.onFocus(option));
+        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();
+    }
+    updateOptions() {
+        this.options.forEach(option => {
+            option.selected = option == this.selectedOption;
+        });
+    }
+};
+FtSwitch.elementDefinitions = {};
+__decorate([
+    query(".ft-switch slot")
+], FtSwitch.prototype, "slottedContent", void 0);
+FtSwitch = __decorate([
+    customElement("ft-switch")
+], FtSwitch);
+export { FtSwitch };
+//# sourceMappingURL=ft-switch.js.map