@fluid-topics/ft-switch 0.1.18 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/ft-switch-option.js +8 -9
- package/build/ft-switch.inline-styles.js +187 -176
- package/build/ft-switch.light.js +149 -138
- package/build/ft-switch.min.js +183 -172
- package/package.json +7 -7
|
@@ -9,9 +9,9 @@ import { property, query } from "lit/decorators.js";
|
|
|
9
9
|
import { designSystemVariables, FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
10
10
|
import { FtRipple, FtRippleCssVariables } from "@fluid-topics/ft-ripple";
|
|
11
11
|
import { FtTypography, FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography";
|
|
12
|
-
import { Icon } from "@material/mwc-icon";
|
|
13
12
|
import { classMap } from "lit/directives/class-map.js";
|
|
14
13
|
import { FtTooltip } from "@fluid-topics/ft-tooltip";
|
|
14
|
+
import { FtIcon, FtIconCssVariables } from "@fluid-topics/ft-icon";
|
|
15
15
|
import { FtSwitchCssVariables, FtSwitchOptionCssVariables } from "./css-variables";
|
|
16
16
|
export class SwitchOptionChange extends CustomEvent {
|
|
17
17
|
constructor() {
|
|
@@ -55,7 +55,7 @@ export class FtSwitchOption extends FtLitElement {
|
|
|
55
55
|
justify-content: center;
|
|
56
56
|
overflow: hidden;
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
${setVariable(FtIconCssVariables.size, FtSwitchCssVariables.iconSize)};
|
|
59
59
|
padding: 6px 8px;
|
|
60
60
|
background-color: ${FtSwitchCssVariables.backgroundColor};
|
|
61
61
|
-webkit-mask-image: radial-gradient(white, black);
|
|
@@ -94,21 +94,20 @@ export class FtSwitchOption extends FtLitElement {
|
|
|
94
94
|
${setVariable(FtRippleCssVariables.color, FtSwitchCssVariables.rippleColor)};
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
|
|
97
|
+
ft-icon, ft-ripple, ft-typography {
|
|
98
98
|
z-index: 2;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.ft-switch-option:not(.ft-switch-option--trailing-icon)
|
|
101
|
+
.ft-switch-option:not(.ft-switch-option--trailing-icon) ft-icon {
|
|
102
102
|
order: -1;
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
-
|
|
105
|
+
ft-icon {
|
|
106
106
|
flex-shrink: 0;
|
|
107
|
-
width: var(--mdc-icon-size);
|
|
108
107
|
color: ${FtSwitchCssVariables.iconColor};
|
|
109
108
|
}
|
|
110
109
|
|
|
111
|
-
.ft-switch-option--input:checked + .ft-switch-option--content
|
|
110
|
+
.ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
|
|
112
111
|
color: ${FtSwitchCssVariables.selectedTextColor};
|
|
113
112
|
}
|
|
114
113
|
`;
|
|
@@ -161,7 +160,7 @@ export class FtSwitchOption extends FtLitElement {
|
|
|
161
160
|
resolveIcon() {
|
|
162
161
|
return this.icon
|
|
163
162
|
? html `
|
|
164
|
-
<
|
|
163
|
+
<ft-icon variant="material">${this.icon}</ft-icon> `
|
|
165
164
|
: nothing;
|
|
166
165
|
}
|
|
167
166
|
get textContent() {
|
|
@@ -179,7 +178,7 @@ FtSwitchOption.elementDefinitions = {
|
|
|
179
178
|
"ft-ripple": FtRipple,
|
|
180
179
|
"ft-typography": FtTypography,
|
|
181
180
|
"ft-tooltip": FtTooltip,
|
|
182
|
-
"
|
|
181
|
+
"ft-icon": FtIcon
|
|
183
182
|
};
|
|
184
183
|
__decorate([
|
|
185
184
|
property({ type: String })
|