@fluid-topics/ft-switch 0.3.13 → 0.3.15
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.css.d.ts +0 -1
- package/build/ft-switch.css.js +1 -34
- package/build/ft-switch.js +35 -4
- package/build/ft-switch.light.js +36 -36
- package/build/ft-switch.min.js +36 -36
- package/package.json +7 -7
package/build/ft-switch.css.d.ts
CHANGED
|
@@ -11,5 +11,4 @@ export declare const FtSwitchCssVariables: {
|
|
|
11
11
|
rippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
12
12
|
outlineColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
13
13
|
};
|
|
14
|
-
export declare const styles: import("lit").CSSResult;
|
|
15
14
|
//# sourceMappingURL=ft-switch.css.d.ts.map
|
package/build/ft-switch.css.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { designSystemVariables, FtCssVariableFactory, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
1
|
+
import { designSystemVariables, FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
3
2
|
import { FtTypographyButtonCssVariables } from "@fluid-topics/ft-typography/build/ft-typography.css";
|
|
4
|
-
import { FtSwitchOptionCssVariables } from "./ft-switch-option.css";
|
|
5
3
|
export const FtSwitchCssVariables = {
|
|
6
4
|
textColor: FtCssVariableFactory.extend("--ft-switch-text-color", designSystemVariables.colorOnSurfaceHigh),
|
|
7
5
|
backgroundColor: FtCssVariableFactory.extend("--ft-switch-background-color", designSystemVariables.colorSurface),
|
|
@@ -15,35 +13,4 @@ export const FtSwitchCssVariables = {
|
|
|
15
13
|
rippleColor: FtCssVariableFactory.extend("--ft-switch-ripple-color", designSystemVariables.colorPrimary),
|
|
16
14
|
outlineColor: FtCssVariableFactory.extend("--ft-switch-outline-color", designSystemVariables.colorPrimary),
|
|
17
15
|
};
|
|
18
|
-
//language=css
|
|
19
|
-
export const styles = css `
|
|
20
|
-
:host {
|
|
21
|
-
display: inline-block;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.ft-switch {
|
|
25
|
-
border-radius: ${FtSwitchCssVariables.borderRadius};
|
|
26
|
-
outline-color: ${FtSwitchCssVariables.outlineColor};
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.ft-switch slot {
|
|
30
|
-
display: flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.ft-switch slot::slotted(ft-switch-option) {
|
|
35
|
-
${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, "0")};
|
|
36
|
-
${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, "0")};
|
|
37
|
-
${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "0")};
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.ft-switch slot::slotted(ft-switch-option:first-child) {
|
|
41
|
-
${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, FtSwitchCssVariables.borderRadius)};
|
|
42
|
-
${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "1px")};
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.ft-switch slot::slotted(ft-switch-option:last-child) {
|
|
46
|
-
${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, FtSwitchCssVariables.borderRadius)};
|
|
47
|
-
}
|
|
48
|
-
`;
|
|
49
16
|
//# sourceMappingURL=ft-switch.css.js.map
|
package/build/ft-switch.js
CHANGED
|
@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
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;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { html } from "lit";
|
|
7
|
+
import { css, html } from "lit";
|
|
8
8
|
import { query, state } from "lit/decorators.js";
|
|
9
|
-
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
9
|
+
import { FtLitElement, setVariable } from "@fluid-topics/ft-wc-utils";
|
|
10
10
|
import { FtSwitchOption } from "./ft-switch-option";
|
|
11
|
-
import {
|
|
11
|
+
import { FtSwitchCssVariables } from "./ft-switch.css";
|
|
12
|
+
import { FtSwitchOptionCssVariables } from "./ft-switch-option.css";
|
|
12
13
|
export class FtSwitchChange extends CustomEvent {
|
|
13
14
|
constructor(value) {
|
|
14
15
|
super("change", { detail: value });
|
|
@@ -94,7 +95,37 @@ export class FtSwitch extends FtLitElement {
|
|
|
94
95
|
}
|
|
95
96
|
}
|
|
96
97
|
FtSwitch.elementDefinitions = {};
|
|
97
|
-
|
|
98
|
+
//language=CSS
|
|
99
|
+
FtSwitch.styles = css `
|
|
100
|
+
:host {
|
|
101
|
+
display: inline-block;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ft-switch {
|
|
105
|
+
border-radius: ${FtSwitchCssVariables.borderRadius};
|
|
106
|
+
outline-color: ${FtSwitchCssVariables.outlineColor};
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.ft-switch slot {
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.ft-switch slot::slotted(ft-switch-option) {
|
|
115
|
+
${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, "0")};
|
|
116
|
+
${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, "0")};
|
|
117
|
+
${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "0")};
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.ft-switch slot::slotted(ft-switch-option:first-child) {
|
|
121
|
+
${setVariable(FtSwitchOptionCssVariables.borderRadiusLeft, FtSwitchCssVariables.borderRadius)};
|
|
122
|
+
${setVariable(FtSwitchOptionCssVariables.borderWidthLeft, "1px")};
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.ft-switch slot::slotted(ft-switch-option:last-child) {
|
|
126
|
+
${setVariable(FtSwitchOptionCssVariables.borderRadiusRight, FtSwitchCssVariables.borderRadius)};
|
|
127
|
+
}
|
|
128
|
+
`;
|
|
98
129
|
__decorate([
|
|
99
130
|
query(".ft-switch slot")
|
|
100
131
|
], FtSwitch.prototype, "slottedContent", void 0);
|
package/build/ft-switch.light.js
CHANGED
|
@@ -302,36 +302,7 @@ const Y=Symbol.for(""),J=t=>{if((null==t?void 0:t.r)===Y)return null==t?void 0:t
|
|
|
302
302
|
${n.unsafeHTML(this.resolvedIcon)}
|
|
303
303
|
<slot ?hidden=${t}></slot>
|
|
304
304
|
</i>
|
|
305
|
-
`}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}update(t){super.update(t),["value","variant"].some((i=>t.has(i)))&&this.resolveIcon()}resolveIcon(){var t,i;let o=this.value||this.textContent;switch(this.variant){case Ti.file_format:this.resolvedIcon=null!==(t=Ni[o.toUpperCase()])&&void 0!==t?t:o;break;case Ti.fluid_topics:this.resolvedIcon=null!==(i=Oi[o.toUpperCase()])&&void 0!==i?i:o;break;default:this.resolvedIcon=this.value||e.nothing}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>{this.resolveIcon()}))}}Ri.elementDefinitions={},Ri.styles=Ii,Fi([o.property()],Ri.prototype,"variant",void 0),Fi([o.property()],Ri.prototype,"value",void 0),Fi([o.state()],Ri.prototype,"resolvedIcon",void 0),Fi([o.query("slot")],Ri.prototype,"slottedContent",void 0),i.customElement("ft-icon")(Ri);const _i={textColor:i.FtCssVariableFactory.extend("--ft-switch-text-color",i.designSystemVariables.colorOnSurfaceHigh),backgroundColor:i.FtCssVariableFactory.extend("--ft-switch-background-color",i.designSystemVariables.colorSurface),selectedTextColor:i.FtCssVariableFactory.extend("--ft-switch-selected-text-color",i.designSystemVariables.colorPrimary),selectedBackgroundColor:i.FtCssVariableFactory.extend("--ft-switch-selected-background-color",i.designSystemVariables.colorPrimary),borderColor:i.FtCssVariableFactory.extend("--ft-switch-border-color",i.designSystemVariables.colorOutline),borderRadius:i.FtCssVariableFactory.extend("--ft-switch-border-radius",i.designSystemVariables.borderRadiusL),fontSize:i.FtCssVariableFactory.extend("--ft-switch-font-size",ri.fontSize),iconSize:i.FtCssVariableFactory.create("--ft-switch-icon-size","SIZE","24px"),iconColor:i.FtCssVariableFactory.extend("--ft-switch-text-color",i.designSystemVariables.colorOnSurfaceMedium),rippleColor:i.FtCssVariableFactory.extend("--ft-switch-ripple-color",i.designSystemVariables.colorPrimary),outlineColor:i.FtCssVariableFactory.extend("--ft-switch-outline-color",i.designSystemVariables.colorPrimary)},Ui=e.css`
|
|
306
|
-
:host {
|
|
307
|
-
display: inline-block;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.ft-switch {
|
|
311
|
-
border-radius: ${_i.borderRadius};
|
|
312
|
-
outline-color: ${_i.outlineColor};
|
|
313
|
-
}
|
|
314
|
-
|
|
315
|
-
.ft-switch slot {
|
|
316
|
-
display: flex;
|
|
317
|
-
align-items: center;
|
|
318
|
-
}
|
|
319
|
-
|
|
320
|
-
.ft-switch slot::slotted(ft-switch-option) {
|
|
321
|
-
${i.setVariable(Bi.borderRadiusLeft,"0")};
|
|
322
|
-
${i.setVariable(Bi.borderRadiusRight,"0")};
|
|
323
|
-
${i.setVariable(Bi.borderWidthLeft,"0")};
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
.ft-switch slot::slotted(ft-switch-option:first-child) {
|
|
327
|
-
${i.setVariable(Bi.borderRadiusLeft,_i.borderRadius)};
|
|
328
|
-
${i.setVariable(Bi.borderWidthLeft,"1px")};
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
.ft-switch slot::slotted(ft-switch-option:last-child) {
|
|
332
|
-
${i.setVariable(Bi.borderRadiusRight,_i.borderRadius)};
|
|
333
|
-
}
|
|
334
|
-
`,Bi={borderRadiusLeft:i.FtCssVariableFactory.extend("--ft-switch-option-border-radius-left",i.designSystemVariables.borderRadiusL),borderRadiusRight:i.FtCssVariableFactory.extend("--ft-switch-option-border-radius-right",i.designSystemVariables.borderRadiusL),borderWidthLeft:i.FtCssVariableFactory.create("--ft-switch-option-border-width-left","SIZE","1px"),borderWidthRight:i.FtCssVariableFactory.create("--ft-switch-option-border-width-right","SIZE","1px"),borderWidthVertical:i.FtCssVariableFactory.create("--ft-switch-option-border-width-vertical","SIZE","1px")},Mi=e.css`
|
|
305
|
+
`}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}update(t){super.update(t),["value","variant"].some((i=>t.has(i)))&&this.resolveIcon()}resolveIcon(){var t,i;let o=this.value||this.textContent;switch(this.variant){case Ti.file_format:this.resolvedIcon=null!==(t=Ni[o.toUpperCase()])&&void 0!==t?t:o;break;case Ti.fluid_topics:this.resolvedIcon=null!==(i=Oi[o.toUpperCase()])&&void 0!==i?i:o;break;default:this.resolvedIcon=this.value||e.nothing}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>{this.resolveIcon()}))}}Ri.elementDefinitions={},Ri.styles=Ii,Fi([o.property()],Ri.prototype,"variant",void 0),Fi([o.property()],Ri.prototype,"value",void 0),Fi([o.state()],Ri.prototype,"resolvedIcon",void 0),Fi([o.query("slot")],Ri.prototype,"slottedContent",void 0),i.customElement("ft-icon")(Ri);const _i={textColor:i.FtCssVariableFactory.extend("--ft-switch-text-color",i.designSystemVariables.colorOnSurfaceHigh),backgroundColor:i.FtCssVariableFactory.extend("--ft-switch-background-color",i.designSystemVariables.colorSurface),selectedTextColor:i.FtCssVariableFactory.extend("--ft-switch-selected-text-color",i.designSystemVariables.colorPrimary),selectedBackgroundColor:i.FtCssVariableFactory.extend("--ft-switch-selected-background-color",i.designSystemVariables.colorPrimary),borderColor:i.FtCssVariableFactory.extend("--ft-switch-border-color",i.designSystemVariables.colorOutline),borderRadius:i.FtCssVariableFactory.extend("--ft-switch-border-radius",i.designSystemVariables.borderRadiusL),fontSize:i.FtCssVariableFactory.extend("--ft-switch-font-size",ri.fontSize),iconSize:i.FtCssVariableFactory.create("--ft-switch-icon-size","SIZE","24px"),iconColor:i.FtCssVariableFactory.extend("--ft-switch-text-color",i.designSystemVariables.colorOnSurfaceMedium),rippleColor:i.FtCssVariableFactory.extend("--ft-switch-ripple-color",i.designSystemVariables.colorPrimary),outlineColor:i.FtCssVariableFactory.extend("--ft-switch-outline-color",i.designSystemVariables.colorPrimary)},Ui={borderRadiusLeft:i.FtCssVariableFactory.extend("--ft-switch-option-border-radius-left",i.designSystemVariables.borderRadiusL),borderRadiusRight:i.FtCssVariableFactory.extend("--ft-switch-option-border-radius-right",i.designSystemVariables.borderRadiusL),borderWidthLeft:i.FtCssVariableFactory.create("--ft-switch-option-border-width-left","SIZE","1px"),borderWidthRight:i.FtCssVariableFactory.create("--ft-switch-option-border-width-right","SIZE","1px"),borderWidthVertical:i.FtCssVariableFactory.create("--ft-switch-option-border-width-vertical","SIZE","1px")},Bi=e.css`
|
|
335
306
|
.ft-switch-option {
|
|
336
307
|
position: relative;
|
|
337
308
|
display: inline-block;
|
|
@@ -350,8 +321,8 @@ const Y=Symbol.for(""),J=t=>{if((null==t?void 0:t.r)===Y)return null==t?void 0:t
|
|
|
350
321
|
|
|
351
322
|
border-style: solid;
|
|
352
323
|
border-color: ${_i.borderColor};
|
|
353
|
-
border-width: ${
|
|
354
|
-
border-radius: ${
|
|
324
|
+
border-width: ${Ui.borderWidthVertical} ${Ui.borderWidthRight} ${Ui.borderWidthVertical} ${Ui.borderWidthLeft};
|
|
325
|
+
border-radius: ${Ui.borderRadiusLeft} ${Ui.borderRadiusRight} ${Ui.borderRadiusRight} ${Ui.borderRadiusLeft};
|
|
355
326
|
display: flex;
|
|
356
327
|
align-items: center;
|
|
357
328
|
justify-content: center;
|
|
@@ -369,7 +340,7 @@ const Y=Symbol.for(""),J=t=>{if((null==t?void 0:t.r)===Y)return null==t?void 0:t
|
|
|
369
340
|
|
|
370
341
|
.ft-switch-option--input:checked + .ft-switch-option--content:before {
|
|
371
342
|
background-color: ${_i.selectedBackgroundColor};
|
|
372
|
-
border-radius: ${
|
|
343
|
+
border-radius: ${Ui.borderRadiusLeft} ${Ui.borderRadiusRight} ${Ui.borderRadiusRight} ${Ui.borderRadiusLeft};
|
|
373
344
|
position: absolute;
|
|
374
345
|
inset: 0;
|
|
375
346
|
content: "";
|
|
@@ -416,7 +387,7 @@ const Y=Symbol.for(""),J=t=>{if((null==t?void 0:t.r)===Y)return null==t?void 0:t
|
|
|
416
387
|
.ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
|
|
417
388
|
color: ${_i.selectedTextColor};
|
|
418
389
|
}
|
|
419
|
-
`;var
|
|
390
|
+
`;var Mi=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Wi extends CustomEvent{constructor(){super("option-change",{bubbles:!0})}}class Zi extends i.FtLitElement{constructor(){super(...arguments),this.value="",this.label="",this.tooltipPosition="bottom",this.selected=!1,this.trailingIcon=!1}focus(){this.input.focus()}updated(t){super.updated(t),t.has("selected")&&this.dispatchEvent(new Wi)}render(){const t={"ft-switch-option":!0,"ft-switch-option--trailing-icon":this.trailingIcon};return this.addTooltip(e.html`
|
|
420
391
|
<label for="input" class=${s.classMap(t)}>
|
|
421
392
|
<input id="input" type="radio" class="ft-switch-option--input"
|
|
422
393
|
.checked=${this.selected}
|
|
@@ -437,9 +408,38 @@ const Y=Symbol.for(""),J=t=>{if((null==t?void 0:t.r)===Y)return null==t?void 0:t
|
|
|
437
408
|
${t}
|
|
438
409
|
</ft-tooltip>
|
|
439
410
|
`}onChange(){this.selected=!0}getLabel(){return this.label||this.textContent}resolveIcon(){return this.icon?e.html`
|
|
440
|
-
<ft-icon variant="material">${this.icon}</ft-icon> `:e.nothing}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}}
|
|
411
|
+
<ft-icon variant="material">${this.icon}</ft-icon> `:e.nothing}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}}Zi.elementDefinitions={"ft-ripple":x,"ft-typography":bi,"ft-tooltip":Ai,"ft-icon":Ri},Zi.styles=Bi,Mi([o.property({type:String})],Zi.prototype,"value",void 0),Mi([o.property({type:String})],Zi.prototype,"icon",void 0),Mi([o.property({type:String})],Zi.prototype,"label",void 0),Mi([o.property({type:String})],Zi.prototype,"tooltipPosition",void 0),Mi([o.property({type:Boolean,reflect:!0})],Zi.prototype,"selected",void 0),Mi([o.property({type:Boolean})],Zi.prototype,"trailingIcon",void 0),Mi([o.query(".ft-switch-option--content slot")],Zi.prototype,"slottedContent",void 0),Mi([o.query(".ft-switch-option--input")],Zi.prototype,"input",void 0);var Di=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Ki extends CustomEvent{constructor(t){super("change",{detail:t})}}class Li extends i.FtLitElement{constructor(){super(...arguments),this.options=[]}get value(){var t;return null===(t=this.selectedOption)||void 0===t?void 0:t.value}updated(t){var i;super.updated(t),t.has("selectedOption")&&(this.updateOptions(),this.dispatchEvent(new Ki(null===(i=this.selectedOption)||void 0===i?void 0:i.value)))}render(){return e.html`
|
|
441
412
|
<div class="ft-switch" @keydown=${this.onKeyDown} tabindex="0">
|
|
442
413
|
<slot @slotchange=${this.onSlotchange}
|
|
443
414
|
@option-change=${this.onOptionChange}></slot>
|
|
444
415
|
</div>
|
|
445
|
-
`}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof
|
|
416
|
+
`}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof Zi&&this.registerOption(t)})),this.selectedOption=this.options.find((t=>t.selected))}registerOption(t){t.setAttribute("tabindex","-1"),this.options.push(t)}onOptionChange(t){let i=t.target;i.selected?this.selectedOption=i:this.selectedOption=this.options.find((t=>t.selected))}focus(){this.ftSwitchDiv.focus()}updateOptions(){this.options.forEach((t=>{t.selected=t==this.selectedOption}))}}Li.elementDefinitions={},Li.styles=e.css`
|
|
417
|
+
:host {
|
|
418
|
+
display: inline-block;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.ft-switch {
|
|
422
|
+
border-radius: ${_i.borderRadius};
|
|
423
|
+
outline-color: ${_i.outlineColor};
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.ft-switch slot {
|
|
427
|
+
display: flex;
|
|
428
|
+
align-items: center;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.ft-switch slot::slotted(ft-switch-option) {
|
|
432
|
+
${i.setVariable(Ui.borderRadiusLeft,"0")};
|
|
433
|
+
${i.setVariable(Ui.borderRadiusRight,"0")};
|
|
434
|
+
${i.setVariable(Ui.borderWidthLeft,"0")};
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
.ft-switch slot::slotted(ft-switch-option:first-child) {
|
|
438
|
+
${i.setVariable(Ui.borderRadiusLeft,_i.borderRadius)};
|
|
439
|
+
${i.setVariable(Ui.borderWidthLeft,"1px")};
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.ft-switch slot::slotted(ft-switch-option:last-child) {
|
|
443
|
+
${i.setVariable(Ui.borderRadiusRight,_i.borderRadius)};
|
|
444
|
+
}
|
|
445
|
+
`,Di([o.query(".ft-switch slot")],Li.prototype,"slottedContent",void 0),Di([o.state()],Li.prototype,"selectedOption",void 0),Di([o.query(".ft-switch")],Li.prototype,"ftSwitchDiv",void 0),i.customElement("ft-switch")(Li),i.customElement("ft-switch-option")(Zi),t.FtSwitch=Li,t.FtSwitchChange=Ki,t.FtSwitchCssVariables=_i,t.FtSwitchOption=Zi,t.FtSwitchOptionCssVariables=Ui,t.SwitchOptionChange=Wi,t.optionStyles=Bi,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap,ftGlobals.litUnsafeHTML);
|
package/build/ft-switch.min.js
CHANGED
|
@@ -408,36 +408,7 @@ class pe extends mt{constructor(t){if(super(t),this.it=K,t.type!==gt)throw Error
|
|
|
408
408
|
${fe(this.resolvedIcon)}
|
|
409
409
|
<slot ?hidden=${t}></slot>
|
|
410
410
|
</i>
|
|
411
|
-
`}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}update(t){super.update(t),["value","variant"].some((i=>t.has(i)))&&this.resolveIcon()}resolveIcon(){var t,i;let e=this.value||this.textContent;switch(this.variant){case ve.file_format:this.resolvedIcon=null!==(t=ue[e.toUpperCase()])&&void 0!==t?t:e;break;case ve.fluid_topics:this.resolvedIcon=null!==(i=de[e.toUpperCase()])&&void 0!==i?i:e;break;default:this.resolvedIcon=this.value||K}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>{this.resolveIcon()}))}}be.elementDefinitions={},be.styles=xe,ge([o()],be.prototype,"variant",void 0),ge([o()],be.prototype,"value",void 0),ge([s()],be.prototype,"resolvedIcon",void 0),ge([r("slot")],be.prototype,"slottedContent",void 0),h("ft-icon")(be);const me={textColor:ct.extend("--ft-switch-text-color",ft.colorOnSurfaceHigh),backgroundColor:ct.extend("--ft-switch-background-color",ft.colorSurface),selectedTextColor:ct.extend("--ft-switch-selected-text-color",ft.colorPrimary),selectedBackgroundColor:ct.extend("--ft-switch-selected-background-color",ft.colorPrimary),borderColor:ct.extend("--ft-switch-border-color",ft.colorOutline),borderRadius:ct.extend("--ft-switch-border-radius",ft.borderRadiusL),fontSize:ct.extend("--ft-switch-font-size",Di.fontSize),iconSize:ct.create("--ft-switch-icon-size","SIZE","24px"),iconColor:ct.extend("--ft-switch-text-color",ft.colorOnSurfaceMedium),rippleColor:ct.extend("--ft-switch-ripple-color",ft.colorPrimary),outlineColor:ct.extend("--ft-switch-outline-color",ft.colorPrimary)},we=y`
|
|
412
|
-
:host {
|
|
413
|
-
display: inline-block;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.ft-switch {
|
|
417
|
-
border-radius: ${me.borderRadius};
|
|
418
|
-
outline-color: ${me.outlineColor};
|
|
419
|
-
}
|
|
420
|
-
|
|
421
|
-
.ft-switch slot {
|
|
422
|
-
display: flex;
|
|
423
|
-
align-items: center;
|
|
424
|
-
}
|
|
425
|
-
|
|
426
|
-
.ft-switch slot::slotted(ft-switch-option) {
|
|
427
|
-
${pt($e.borderRadiusLeft,"0")};
|
|
428
|
-
${pt($e.borderRadiusRight,"0")};
|
|
429
|
-
${pt($e.borderWidthLeft,"0")};
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
.ft-switch slot::slotted(ft-switch-option:first-child) {
|
|
433
|
-
${pt($e.borderRadiusLeft,me.borderRadius)};
|
|
434
|
-
${pt($e.borderWidthLeft,"1px")};
|
|
435
|
-
}
|
|
436
|
-
|
|
437
|
-
.ft-switch slot::slotted(ft-switch-option:last-child) {
|
|
438
|
-
${pt($e.borderRadiusRight,me.borderRadius)};
|
|
439
|
-
}
|
|
440
|
-
`,$e={borderRadiusLeft:ct.extend("--ft-switch-option-border-radius-left",ft.borderRadiusL),borderRadiusRight:ct.extend("--ft-switch-option-border-radius-right",ft.borderRadiusL),borderWidthLeft:ct.create("--ft-switch-option-border-width-left","SIZE","1px"),borderWidthRight:ct.create("--ft-switch-option-border-width-right","SIZE","1px"),borderWidthVertical:ct.create("--ft-switch-option-border-width-vertical","SIZE","1px")},Oe=y`
|
|
411
|
+
`}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}update(t){super.update(t),["value","variant"].some((i=>t.has(i)))&&this.resolveIcon()}resolveIcon(){var t,i;let e=this.value||this.textContent;switch(this.variant){case ve.file_format:this.resolvedIcon=null!==(t=ue[e.toUpperCase()])&&void 0!==t?t:e;break;case ve.fluid_topics:this.resolvedIcon=null!==(i=de[e.toUpperCase()])&&void 0!==i?i:e;break;default:this.resolvedIcon=this.value||K}}firstUpdated(t){super.firstUpdated(t),setTimeout((()=>{this.resolveIcon()}))}}be.elementDefinitions={},be.styles=xe,ge([o()],be.prototype,"variant",void 0),ge([o()],be.prototype,"value",void 0),ge([s()],be.prototype,"resolvedIcon",void 0),ge([r("slot")],be.prototype,"slottedContent",void 0),h("ft-icon")(be);const me={textColor:ct.extend("--ft-switch-text-color",ft.colorOnSurfaceHigh),backgroundColor:ct.extend("--ft-switch-background-color",ft.colorSurface),selectedTextColor:ct.extend("--ft-switch-selected-text-color",ft.colorPrimary),selectedBackgroundColor:ct.extend("--ft-switch-selected-background-color",ft.colorPrimary),borderColor:ct.extend("--ft-switch-border-color",ft.colorOutline),borderRadius:ct.extend("--ft-switch-border-radius",ft.borderRadiusL),fontSize:ct.extend("--ft-switch-font-size",Di.fontSize),iconSize:ct.create("--ft-switch-icon-size","SIZE","24px"),iconColor:ct.extend("--ft-switch-text-color",ft.colorOnSurfaceMedium),rippleColor:ct.extend("--ft-switch-ripple-color",ft.colorPrimary),outlineColor:ct.extend("--ft-switch-outline-color",ft.colorPrimary)},we={borderRadiusLeft:ct.extend("--ft-switch-option-border-radius-left",ft.borderRadiusL),borderRadiusRight:ct.extend("--ft-switch-option-border-radius-right",ft.borderRadiusL),borderWidthLeft:ct.create("--ft-switch-option-border-width-left","SIZE","1px"),borderWidthRight:ct.create("--ft-switch-option-border-width-right","SIZE","1px"),borderWidthVertical:ct.create("--ft-switch-option-border-width-vertical","SIZE","1px")},$e=y`
|
|
441
412
|
.ft-switch-option {
|
|
442
413
|
position: relative;
|
|
443
414
|
display: inline-block;
|
|
@@ -456,8 +427,8 @@ class pe extends mt{constructor(t){if(super(t),this.it=K,t.type!==gt)throw Error
|
|
|
456
427
|
|
|
457
428
|
border-style: solid;
|
|
458
429
|
border-color: ${me.borderColor};
|
|
459
|
-
border-width: ${
|
|
460
|
-
border-radius: ${
|
|
430
|
+
border-width: ${we.borderWidthVertical} ${we.borderWidthRight} ${we.borderWidthVertical} ${we.borderWidthLeft};
|
|
431
|
+
border-radius: ${we.borderRadiusLeft} ${we.borderRadiusRight} ${we.borderRadiusRight} ${we.borderRadiusLeft};
|
|
461
432
|
display: flex;
|
|
462
433
|
align-items: center;
|
|
463
434
|
justify-content: center;
|
|
@@ -475,7 +446,7 @@ class pe extends mt{constructor(t){if(super(t),this.it=K,t.type!==gt)throw Error
|
|
|
475
446
|
|
|
476
447
|
.ft-switch-option--input:checked + .ft-switch-option--content:before {
|
|
477
448
|
background-color: ${me.selectedBackgroundColor};
|
|
478
|
-
border-radius: ${
|
|
449
|
+
border-radius: ${we.borderRadiusLeft} ${we.borderRadiusRight} ${we.borderRadiusRight} ${we.borderRadiusLeft};
|
|
479
450
|
position: absolute;
|
|
480
451
|
inset: 0;
|
|
481
452
|
content: "";
|
|
@@ -522,7 +493,7 @@ class pe extends mt{constructor(t){if(super(t),this.it=K,t.type!==gt)throw Error
|
|
|
522
493
|
.ft-switch-option--input:checked + .ft-switch-option--content ft-icon {
|
|
523
494
|
color: ${me.selectedTextColor};
|
|
524
495
|
}
|
|
525
|
-
`;var
|
|
496
|
+
`;var Oe=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Se extends CustomEvent{constructor(){super("option-change",{bubbles:!0})}}class ke extends xt{constructor(){super(...arguments),this.value="",this.label="",this.tooltipPosition="bottom",this.selected=!1,this.trailingIcon=!1}focus(){this.input.focus()}updated(t){super.updated(t),t.has("selected")&&this.dispatchEvent(new Se)}render(){const t={"ft-switch-option":!0,"ft-switch-option--trailing-icon":this.trailingIcon};return this.addTooltip(I`
|
|
526
497
|
<label for="input" class=${wt(t)}>
|
|
527
498
|
<input id="input" type="radio" class="ft-switch-option--input"
|
|
528
499
|
.checked=${this.selected}
|
|
@@ -543,9 +514,38 @@ class pe extends mt{constructor(t){if(super(t),this.it=K,t.type!==gt)throw Error
|
|
|
543
514
|
${t}
|
|
544
515
|
</ft-tooltip>
|
|
545
516
|
`}onChange(){this.selected=!0}getLabel(){return this.label||this.textContent}resolveIcon(){return this.icon?I`
|
|
546
|
-
<ft-icon variant="material">${this.icon}</ft-icon> `:K}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}}
|
|
517
|
+
<ft-icon variant="material">${this.icon}</ft-icon> `:K}get textContent(){var t,i;return null!==(i=null===(t=this.slottedContent)||void 0===t?void 0:t.assignedNodes().map((t=>t.textContent)).join("").trim())&&void 0!==i?i:""}hasTextContent(){return this.textContent.length>0}onSlotchange(){this.requestUpdate()}}ke.elementDefinitions={"ft-ripple":Ft,"ft-typography":ie,"ft-tooltip":ce,"ft-icon":be},ke.styles=$e,Oe([o({type:String})],ke.prototype,"value",void 0),Oe([o({type:String})],ke.prototype,"icon",void 0),Oe([o({type:String})],ke.prototype,"label",void 0),Oe([o({type:String})],ke.prototype,"tooltipPosition",void 0),Oe([o({type:Boolean,reflect:!0})],ke.prototype,"selected",void 0),Oe([o({type:Boolean})],ke.prototype,"trailingIcon",void 0),Oe([r(".ft-switch-option--content slot")],ke.prototype,"slottedContent",void 0),Oe([r(".ft-switch-option--input")],ke.prototype,"input",void 0);var Ce=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,l=t.length-1;l>=0;l--)(s=t[l])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};class Ne extends CustomEvent{constructor(t){super("change",{detail:t})}}class Ee extends xt{constructor(){super(...arguments),this.options=[]}get value(){var t;return null===(t=this.selectedOption)||void 0===t?void 0:t.value}updated(t){var i;super.updated(t),t.has("selectedOption")&&(this.updateOptions(),this.dispatchEvent(new Ne(null===(i=this.selectedOption)||void 0===i?void 0:i.value)))}render(){return I`
|
|
547
518
|
<div class="ft-switch" @keydown=${this.onKeyDown} tabindex="0">
|
|
548
519
|
<slot @slotchange=${this.onSlotchange}
|
|
549
520
|
@option-change=${this.onOptionChange}></slot>
|
|
550
521
|
</div>
|
|
551
|
-
`}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof
|
|
522
|
+
`}onKeyDown(t){let i;"ArrowDown"!=t.key&&"ArrowRight"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)+1:0),"ArrowUp"!=t.key&&"ArrowLeft"!=t.key||(i=this.selectedOption?this.options.indexOf(this.selectedOption)-1:this.options.length-1),null!=i&&(t.preventDefault(),this.options[this.fixIndex(i)].selected=!0)}fixIndex(t){return t<0?this.options.length-1:t>this.options.length-1?0:t}onSlotchange(){var t;this.options=[],null===(t=this.slottedContent)||void 0===t||t.assignedElements().forEach((t=>{t instanceof ke&&this.registerOption(t)})),this.selectedOption=this.options.find((t=>t.selected))}registerOption(t){t.setAttribute("tabindex","-1"),this.options.push(t)}onOptionChange(t){let i=t.target;i.selected?this.selectedOption=i:this.selectedOption=this.options.find((t=>t.selected))}focus(){this.ftSwitchDiv.focus()}updateOptions(){this.options.forEach((t=>{t.selected=t==this.selectedOption}))}}Ee.elementDefinitions={},Ee.styles=y`
|
|
523
|
+
:host {
|
|
524
|
+
display: inline-block;
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.ft-switch {
|
|
528
|
+
border-radius: ${me.borderRadius};
|
|
529
|
+
outline-color: ${me.outlineColor};
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
.ft-switch slot {
|
|
533
|
+
display: flex;
|
|
534
|
+
align-items: center;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
.ft-switch slot::slotted(ft-switch-option) {
|
|
538
|
+
${pt(we.borderRadiusLeft,"0")};
|
|
539
|
+
${pt(we.borderRadiusRight,"0")};
|
|
540
|
+
${pt(we.borderWidthLeft,"0")};
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.ft-switch slot::slotted(ft-switch-option:first-child) {
|
|
544
|
+
${pt(we.borderRadiusLeft,me.borderRadius)};
|
|
545
|
+
${pt(we.borderWidthLeft,"1px")};
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.ft-switch slot::slotted(ft-switch-option:last-child) {
|
|
549
|
+
${pt(we.borderRadiusRight,me.borderRadius)};
|
|
550
|
+
}
|
|
551
|
+
`,Ce([r(".ft-switch slot")],Ee.prototype,"slottedContent",void 0),Ce([s()],Ee.prototype,"selectedOption",void 0),Ce([r(".ft-switch")],Ee.prototype,"ftSwitchDiv",void 0),h("ft-switch")(Ee),h("ft-switch-option")(ke),t.FtSwitch=Ee,t.FtSwitchChange=Ne,t.FtSwitchCssVariables=me,t.FtSwitchOption=ke,t.FtSwitchOptionCssVariables=we,t.SwitchOptionChange=Se,t.optionStyles=$e,Object.defineProperty(t,"i",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-switch",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.15",
|
|
4
4
|
"description": "two-state",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-icon": "0.3.
|
|
23
|
-
"@fluid-topics/ft-ripple": "0.3.
|
|
24
|
-
"@fluid-topics/ft-tooltip": "0.3.
|
|
25
|
-
"@fluid-topics/ft-typography": "0.3.
|
|
26
|
-
"@fluid-topics/ft-wc-utils": "0.3.
|
|
22
|
+
"@fluid-topics/ft-icon": "0.3.15",
|
|
23
|
+
"@fluid-topics/ft-ripple": "0.3.15",
|
|
24
|
+
"@fluid-topics/ft-tooltip": "0.3.15",
|
|
25
|
+
"@fluid-topics/ft-typography": "0.3.15",
|
|
26
|
+
"@fluid-topics/ft-wc-utils": "0.3.15",
|
|
27
27
|
"lit": "2.2.8"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "067add51b15dae11774878d4fcee1dfc734d00fa"
|
|
30
30
|
}
|