@fluid-topics/ft-switch 1.3.14 → 1.3.16

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

@@ -11,7 +11,7 @@ export const FtSwitchOptionCssVariables = {
     borderWidthRight: FtCssVariableFactory.create("--ft-switch-option-border-width-right", "", "SIZE", "1px"),
     borderWidthVertical: FtCssVariableFactory.create("--ft-switch-option-border-width-vertical", "", "SIZE", "1px"),
 };
-//language=css
+// language=css
 export const optionStyles = css `
     .ft-switch-option {
         position: relative;
@@ -26,8 +26,8 @@ export const optionStyles = css `
     }
 
     .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});
+        --switch-option-internal-line-height: calc(${FtSwitchCssVariables.fontSize} + 2px);
+        --switch-option-internal-content-height: max(var(--switch-option-internal-line-height), ${FtSwitchCssVariables.iconSize});
 
         border-style: solid;
         border-color: ${FtSwitchCssVariables.borderColor};
@@ -38,7 +38,7 @@ export const optionStyles = css `
         justify-content: center;
         overflow: hidden;
         ${setVariable(FtIconCssVariables.size, FtSwitchCssVariables.iconSize)};
-        padding: var(--ft-switch-internal-vertical-padding, 6px) var(--ft-switch-internal-horizontal-padding, 8px);
+        padding: var(--switch-internal-vertical-padding, 6px) var(--switch-internal-horizontal-padding, 8px);
         background-color: ${FtSwitchCssVariables.backgroundColor};
         -webkit-mask-image: radial-gradient(white, black);
     }
@@ -65,7 +65,7 @@ export const optionStyles = css `
         display: block;
         margin: 0 8px;
         ${setVariable(FtTypographyButtonCssVariables.fontSize, FtSwitchCssVariables.fontSize)};
-        ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--ft-switch-option-internal-content-height)")}
+        ${setVariable(FtTypographyButtonCssVariables.lineHeight, "var(--switch-option-internal-content-height)")}
     }
 
     .ft-switch-option--selected .ft-switch-option--label {

package/build/ft-switch.js

@@ -34,7 +34,7 @@ class FtSwitch extends FtLitElement {
             this.updateOptions();
         }
         if (props.has("unselectable")) {
-            this.options.forEach(o => o.unselectable = this.unselectable);
+            this.options.forEach((o) => o.unselectable = this.unselectable);
         }
     }
     render() {
@@ -43,7 +43,7 @@ class FtSwitch extends FtLitElement {
             "ft-switch--dense": this.dense,
         };
         return html `
-            <div @keydown=${this.onKeyDown} tabindex="-1" class="${classMap(classes)}" role="radiogroup" aria-label=${this.label}>
+            <div @keydown=${this.onKeyDown} tabindex="-1" class="${classMap(classes)}" role="radiogroup" aria-label="${this.label}">
                 <slot @slotchange=${this.onSlotchange}
                       @option-change=${this.onOptionChangeByScript}
                       @option-change-by-user=${this.onOptionChangeByUser}
@@ -81,16 +81,16 @@ class FtSwitch extends FtLitElement {
     onSlotchange() {
         var _a;
         this.options = [];
-        (_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.selectedOption = this.options.find(option => option.selected);
+        this.selectedOption = this.options.find((option) => option.selected);
     }
     registerOption(option) {
         var _a;
-        (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("input").forEach(input => {
+        (_a = option.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("input").forEach((input) => {
             input.setAttribute("tabindex", "-1");
         });
         option.setAttribute("tabindex", "0");
@@ -99,7 +99,7 @@ class FtSwitch extends FtLitElement {
     }
     onOptionChangeByScript(e) {
         e.stopPropagation();
-        let option = e.target;
+        const option = e.target;
         this.onOptionChange(option);
     }
     onOptionChangeByUser(e) {
@@ -114,7 +114,7 @@ class FtSwitch extends FtLitElement {
             this.selectedOption = option;
         }
         else {
-            this.selectedOption = this.options.find(option => option.selected);
+            this.selectedOption = this.options.find((option) => option.selected);
         }
     }
     private(option) {
@@ -122,14 +122,14 @@ class FtSwitch extends FtLitElement {
             this.selectedOption = option;
         }
         else {
-            this.selectedOption = this.options.find(option => option.selected);
+            this.selectedOption = this.options.find((option) => option.selected);
         }
     }
     focus() {
         this.ftSwitchDiv.focus();
     }
     updateOptions() {
-        this.options.forEach(option => {
+        this.options.forEach((option) => {
             option.selected = option === this.selectedOption;
             if (this.displayFocusWhenUsingKeyboard) {
                 option.isFocused = option === this.selectedOption;
@@ -138,7 +138,7 @@ class FtSwitch extends FtLitElement {
     }
 }
 FtSwitch.elementDefinitions = {};
-//language=CSS
+// language=CSS
 FtSwitch.styles = css `
         :host {
             display: inline-block;
@@ -170,8 +170,8 @@ FtSwitch.styles = css `
         }
 
         .ft-switch--dense slot::slotted(ft-switch-option) {
-            --ft-switch-internal-vertical-padding: 2px;
-            --ft-switch-internal-horizontal-padding: 4px;
+            --switch-internal-vertical-padding: 2px;
+            --switch-internal-horizontal-padding: 4px;
         }
     `;
 __decorate([