@fluid-topics/ft-checkbox 0.2.19 → 0.2.22
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-checkbox.js +9 -8
- package/build/ft-checkbox.light.js +16 -15
- package/build/ft-checkbox.min.js +9 -8
- package/package.json +5 -5
package/build/ft-checkbox.js
CHANGED
|
@@ -33,14 +33,8 @@ export class FtCheckbox extends FtLitElement {
|
|
|
33
33
|
"ft-checkbox--disabled": this.disabled,
|
|
34
34
|
};
|
|
35
35
|
return html `
|
|
36
|
-
<label class="${classMap(classes)}">
|
|
36
|
+
<label class="${classMap(classes)}" for="checkbox-input">
|
|
37
37
|
<div class="ft-checkbox--box-container">
|
|
38
|
-
<input type="checkbox"
|
|
39
|
-
name=${this.name}
|
|
40
|
-
.checked=${this.checked}
|
|
41
|
-
.disabled=${this.disabled}
|
|
42
|
-
@change=${this.onChange}
|
|
43
|
-
>
|
|
44
38
|
<ft-ripple
|
|
45
39
|
?disabled=${this.disabled}
|
|
46
40
|
?primary=${this.checked || this.indeterminate}
|
|
@@ -52,6 +46,13 @@ export class FtCheckbox extends FtLitElement {
|
|
|
52
46
|
d=${(this.indeterminate && !this.checked) ? "M2,12 22,12" : "M1.73,12.91 8.1,19.28 22.79,4.59"}></path>
|
|
53
47
|
</svg>
|
|
54
48
|
</div>
|
|
49
|
+
<input type="checkbox"
|
|
50
|
+
id="checkbox-input"
|
|
51
|
+
name="${this.name}"
|
|
52
|
+
.checked=${this.checked}
|
|
53
|
+
.disabled=${this.disabled}
|
|
54
|
+
@change=${this.onChange}
|
|
55
|
+
>
|
|
55
56
|
</div>
|
|
56
57
|
<ft-typography variant="body2">
|
|
57
58
|
<slot></slot>
|
|
@@ -158,7 +159,7 @@ __decorate([
|
|
|
158
159
|
property()
|
|
159
160
|
], FtCheckbox.prototype, "name", void 0);
|
|
160
161
|
__decorate([
|
|
161
|
-
property({ type: Boolean })
|
|
162
|
+
property({ type: Boolean, reflect: true })
|
|
162
163
|
], FtCheckbox.prototype, "checked", void 0);
|
|
163
164
|
__decorate([
|
|
164
165
|
property({ type: Boolean })
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(t,i,e,o,s){var r=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const n=i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorContent),h=n,p=i.FtCssVariable.extend("--ft-ripple-background-color",n),l=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),a=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),f=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),c=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceSelected,"Design system"),d=i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorPrimary),y=d,
|
|
1
|
+
!function(t,i,e,o,s){var r=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const n=i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorContent),h=n,p=i.FtCssVariable.extend("--ft-ripple-background-color",n),l=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfacePressed,"Design system"),a=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceHover,"Design system"),f=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceFocused,"Design system"),c=i.FtCssVariable.external(i.designSystemVariables.opacityContentOnSurfaceSelected,"Design system"),d=i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorPrimary),y=d,u=i.FtCssVariable.extend("--ft-ripple-background-color",d),g=i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorSecondary),b=g,v=i.FtCssVariable.extend("--ft-ripple-background-color",g);class m extends i.FtLitElement{constructor(){super(...arguments),this.primary=!1,this.secondary=!1,this.unbounded=!1,this.activated=!1,this.selected=!1,this.disabled=!1,this.hovered=!1,this.focused=!1,this.pressed=!1,this.rippling=!1,this.rippleSize=0,this.originX=0,this.originY=0,this.resizeObserver=new ResizeObserver((()=>this.setRippleSize())),this.debouncer=new i.Debouncer(1e3),this.onTransitionStart=t=>{"transform"===t.propertyName&&(this.rippling=this.pressed,this.debouncer.run((()=>this.rippling=!1)))},this.onTransitionEnd=t=>{"transform"===t.propertyName&&(this.rippling=!1)},this.moveRipple=t=>{var i,e;let{x:o,y:s}=this.getCoordinates(t),r=null!==(e=null===(i=this.ripple)||void 0===i?void 0:i.getBoundingClientRect())&&void 0!==e?e:{x:0,y:0,width:0,height:0};this.originX=Math.round(null!=o?o-r.x:r.width/2),this.originY=Math.round(null!=s?s-r.y:r.height/2)},this.startPress=t=>{this.moveRipple(t),this.pressed=!this.isIgnored(t)},this.endPress=()=>{this.pressed=!1},this.startHover=t=>{this.hovered=!this.isIgnored(t)},this.endHover=()=>{this.hovered=!1},this.startFocus=t=>{this.focused=!this.isIgnored(t)},this.endFocus=()=>{this.focused=!1}}render(){let t={"ft-ripple":!0,"ft-ripple--primary":this.primary,"ft-ripple--secondary":this.secondary,"ft-ripple--unbounded":this.unbounded,"ft-ripple--selected":(this.selected||this.activated)&&!this.disabled,"ft-ripple--pressed":(this.pressed||this.rippling)&&!this.disabled,"ft-ripple--hovered":this.hovered&&!this.disabled,"ft-ripple--focused":this.focused&&!this.disabled};return e.html`
|
|
2
2
|
<style>
|
|
3
3
|
.ft-ripple .ft-ripple--effect,
|
|
4
4
|
.ft-ripple.ft-ripple--unbounded .ft-ripple--background {
|
|
@@ -59,7 +59,7 @@ var $;m.elementDefinitions={},m.styles=e.css`
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
.ft-ripple.ft-ripple--primary .ft-ripple--background {
|
|
62
|
-
background-color: ${
|
|
62
|
+
background-color: ${u};
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.ft-ripple.ft-ripple--primary .ft-ripple--effect {
|
|
@@ -116,18 +116,18 @@ var $;m.elementDefinitions={},m.styles=e.css`
|
|
|
116
116
|
* Copyright 2020 Google LLC
|
|
117
117
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
118
118
|
*/
|
|
119
|
-
const tt=Symbol.for(""),it=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===tt)return null===(e=t)||void 0===e?void 0:e._$litStatic$},et=t=>({_$litStatic$:t,r:tt}),ot=new Map,st=(t=>(i,...e)=>{const o=e.length;let s,r;const n=[],h=[];let p,l=0,a=!1;for(;l<o;){for(p=i[l];l<o&&void 0!==(r=e[l],s=it(r));)p+=s+i[++l],a=!0;h.push(r),n.push(p),l++}if(l===o&&n.push(i[o]),a){const t=n.join("$$lit$$");void 0===(i=ot.get(t))&&(n.raw=n,ot.set(t,i=n)),e=h}return t(i,...e)})(I);var rt,nt=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(rt||(rt={}));const ht=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),pt=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),lt={fontFamily:pt,fontSize:i.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:i.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:i.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:i.FtCssVariable.create("--ft-typography-line-height","NUMBER","1.5"),textTransform:i.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},at=i.FtCssVariable.extend("--ft-typography-title-font-family",ht),ft=i.FtCssVariable.extend("--ft-typography-title-font-size",lt.fontSize,"20px"),ct=i.FtCssVariable.extend("--ft-typography-title-font-weight",lt.fontWeight,"normal"),dt=i.FtCssVariable.extend("--ft-typography-title-letter-spacing",lt.letterSpacing,"0.15px"),yt=i.FtCssVariable.extend("--ft-typography-title-line-height",lt.lineHeight,"1.2"),
|
|
119
|
+
const tt=Symbol.for(""),it=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)===tt)return null===(e=t)||void 0===e?void 0:e._$litStatic$},et=t=>({_$litStatic$:t,r:tt}),ot=new Map,st=(t=>(i,...e)=>{const o=e.length;let s,r;const n=[],h=[];let p,l=0,a=!1;for(;l<o;){for(p=i[l];l<o&&void 0!==(r=e[l],s=it(r));)p+=s+i[++l],a=!0;h.push(r),n.push(p),l++}if(l===o&&n.push(i[o]),a){const t=n.join("$$lit$$");void 0===(i=ot.get(t))&&(n.raw=n,ot.set(t,i=n)),e=h}return t(i,...e)})(I);var rt,nt=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(rt||(rt={}));const ht=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),pt=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),lt={fontFamily:pt,fontSize:i.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:i.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:i.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:i.FtCssVariable.create("--ft-typography-line-height","NUMBER","1.5"),textTransform:i.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},at=i.FtCssVariable.extend("--ft-typography-title-font-family",ht),ft=i.FtCssVariable.extend("--ft-typography-title-font-size",lt.fontSize,"20px"),ct=i.FtCssVariable.extend("--ft-typography-title-font-weight",lt.fontWeight,"normal"),dt=i.FtCssVariable.extend("--ft-typography-title-letter-spacing",lt.letterSpacing,"0.15px"),yt=i.FtCssVariable.extend("--ft-typography-title-line-height",lt.lineHeight,"1.2"),ut=i.FtCssVariable.extend("--ft-typography-title-text-transform",lt.textTransform,"inherit"),gt=i.FtCssVariable.extend("--ft-typography-title-dense-font-family",ht),bt=i.FtCssVariable.extend("--ft-typography-title-dense-font-size",lt.fontSize,"14px"),vt=i.FtCssVariable.extend("--ft-typography-title-dense-font-weight",lt.fontWeight,"normal"),mt=i.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",lt.letterSpacing,"0.105px"),$t=i.FtCssVariable.extend("--ft-typography-title-dense-line-height",lt.lineHeight,"1.7"),xt=i.FtCssVariable.extend("--ft-typography-title-dense-text-transform",lt.textTransform,"inherit"),kt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-family",pt),wt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-size",lt.fontSize,"16px"),zt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",lt.fontWeight,"600"),At=i.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",lt.letterSpacing,"0.144px"),_t=i.FtCssVariable.extend("--ft-typography-subtitle1-line-height",lt.lineHeight,"1.5"),Ct=i.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",lt.textTransform,"inherit"),St=i.FtCssVariable.extend("--ft-typography-subtitle2-font-family",pt),Mt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-size",lt.fontSize,"14px"),Nt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",lt.fontWeight,"normal"),Ot=i.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",lt.letterSpacing,"0.098px"),Bt=i.FtCssVariable.extend("--ft-typography-subtitle2-line-height",lt.lineHeight,"1.7"),Et=i.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",lt.textTransform,"inherit"),jt=i.FtCssVariable.extend("--ft-typography-body1-font-family",pt),Tt=i.FtCssVariable.extend("--ft-typography-body1-font-size",lt.fontSize,"16px"),Dt=i.FtCssVariable.extend("--ft-typography-body1-font-weight",lt.fontWeight,"normal"),It=i.FtCssVariable.extend("--ft-typography-body1-letter-spacing",lt.letterSpacing,"0.496px"),Ut=i.FtCssVariable.extend("--ft-typography-body1-line-height",lt.lineHeight,"1.5"),Rt=i.FtCssVariable.extend("--ft-typography-body1-text-transform",lt.textTransform,"inherit"),Gt=i.FtCssVariable.extend("--ft-typography-body2-font-family",pt),Wt=i.FtCssVariable.extend("--ft-typography-body2-font-size",lt.fontSize,"14px"),Zt=i.FtCssVariable.extend("--ft-typography-body2-font-weight",lt.fontWeight,"normal"),Ft=i.FtCssVariable.extend("--ft-typography-body2-letter-spacing",lt.letterSpacing,"0.252px"),Ht=i.FtCssVariable.extend("--ft-typography-body2-line-height",lt.lineHeight,"1.4"),Kt=i.FtCssVariable.extend("--ft-typography-body2-text-transform",lt.textTransform,"inherit"),Pt=i.FtCssVariable.extend("--ft-typography-caption-font-family",pt),Lt=i.FtCssVariable.extend("--ft-typography-caption-font-size",lt.fontSize,"12px"),Xt=i.FtCssVariable.extend("--ft-typography-caption-font-weight",lt.fontWeight,"normal"),Yt=i.FtCssVariable.extend("--ft-typography-caption-letter-spacing",lt.letterSpacing,"0.396px"),qt=i.FtCssVariable.extend("--ft-typography-caption-line-height",lt.lineHeight,"1.33"),Jt=i.FtCssVariable.extend("--ft-typography-caption-text-transform",lt.textTransform,"inherit"),Qt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",pt),Vt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",lt.fontSize,"10px"),ti=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",lt.fontWeight,"normal"),ii=i.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",lt.letterSpacing,"0.33px"),ei=i.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",lt.lineHeight,"1.6"),oi=i.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",lt.textTransform,"inherit"),si=i.FtCssVariable.extend("--ft-typography-overline-font-family",pt),ri=i.FtCssVariable.extend("--ft-typography-overline-font-size",lt.fontSize,"10px"),ni=i.FtCssVariable.extend("--ft-typography-overline-font-weight",lt.fontWeight,"normal"),hi=i.FtCssVariable.extend("--ft-typography-overline-letter-spacing",lt.letterSpacing,"1.5px"),pi=i.FtCssVariable.extend("--ft-typography-overline-line-height",lt.lineHeight,"1.6"),li=i.FtCssVariable.extend("--ft-typography-overline-text-transform",lt.textTransform,"uppercase"),ai=i.FtCssVariable.extend("--ft-typography-button-font-family",pt),fi=i.FtCssVariable.extend("--ft-typography-button-font-size",lt.fontSize,"14px"),ci=i.FtCssVariable.extend("--ft-typography-button-font-weight",lt.fontWeight,"600"),di=i.FtCssVariable.extend("--ft-typography-button-letter-spacing",lt.letterSpacing,"1.246px"),yi=i.FtCssVariable.extend("--ft-typography-button-line-height",lt.lineHeight,"1.15"),ui=i.FtCssVariable.extend("--ft-typography-button-text-transform",lt.textTransform,"uppercase"),gi=e.css`
|
|
120
120
|
.ft-typography--title {
|
|
121
121
|
font-family: ${at};
|
|
122
122
|
font-size: ${ft};
|
|
123
123
|
font-weight: ${ct};
|
|
124
124
|
letter-spacing: ${dt};
|
|
125
125
|
line-height: ${yt};
|
|
126
|
-
text-transform: ${
|
|
126
|
+
text-transform: ${ut};
|
|
127
127
|
}
|
|
128
128
|
`,bi=e.css`
|
|
129
129
|
.ft-typography--title-dense {
|
|
130
|
-
font-family: ${
|
|
130
|
+
font-family: ${gt};
|
|
131
131
|
font-size: ${bt};
|
|
132
132
|
font-weight: ${vt};
|
|
133
133
|
letter-spacing: ${mt};
|
|
@@ -205,7 +205,7 @@ const tt=Symbol.for(""),it=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)=
|
|
|
205
205
|
font-weight: ${ci};
|
|
206
206
|
letter-spacing: ${di};
|
|
207
207
|
line-height: ${yi};
|
|
208
|
-
text-transform: ${
|
|
208
|
+
text-transform: ${ui};
|
|
209
209
|
}
|
|
210
210
|
`;class _i extends i.FtLitElement{constructor(){super(...arguments),this.variant=rt.body1}render(){return this.element?st`
|
|
211
211
|
<${et(this.element)}
|
|
@@ -214,19 +214,13 @@ const tt=Symbol.for(""),it=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)=
|
|
|
214
214
|
</${et(this.element)}>
|
|
215
215
|
`:st`
|
|
216
216
|
<slot class="ft-typography ft-typography--${this.variant}"></slot>
|
|
217
|
-
`}}_i.styles=[
|
|
217
|
+
`}}_i.styles=[gi,bi,vi,mi,$i,xi,ki,wi,zi,Ai,e.css`
|
|
218
218
|
.ft-typography {
|
|
219
219
|
vertical-align: inherit;
|
|
220
220
|
}
|
|
221
221
|
`],nt([o.property()],_i.prototype,"element",void 0),nt([o.property()],_i.prototype,"variant",void 0),i.customElement("ft-typography")(_i);var Ci=function(t,i,e,o){for(var s,r=arguments.length,n=r<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(n=(r<3?s(n):r>3?s(i,e,n):s(i,e))||n);return r>3&&n&&Object.defineProperty(i,e,n),n};const Si={textColor:i.FtCssVariable.extend("--ft-checkbox-text-color",i.designSystemVariables.colorOnSurfaceHigh),colorPrimary:i.FtCssVariable.external(i.designSystemVariables.colorPrimary,"Design system"),colorOnPrimary:i.FtCssVariable.external(i.designSystemVariables.colorOnPrimary,"Design system"),borderColor:i.FtCssVariable.extend("--ft-checkbox-border-color",i.designSystemVariables.colorOnSurfaceMedium),colorOnSurfaceDisabled:i.FtCssVariable.external(i.designSystemVariables.colorOnSurfaceDisabled,"Design system")};class Mi extends i.FtLitElement{constructor(){super(...arguments),this.name="",this.checked=!1,this.indeterminate=!1,this.disabled=!1}render(){const t={"ft-checkbox":!0,"ft-checkbox--checked":this.checked,"ft-checkbox--indeterminate":this.indeterminate,"ft-checkbox--disabled":this.disabled};return e.html`
|
|
222
|
-
<label class="${s.classMap(t)}">
|
|
222
|
+
<label class="${s.classMap(t)}" for="checkbox-input">
|
|
223
223
|
<div class="ft-checkbox--box-container">
|
|
224
|
-
<input type="checkbox"
|
|
225
|
-
name=${this.name}
|
|
226
|
-
.checked=${this.checked}
|
|
227
|
-
.disabled=${this.disabled}
|
|
228
|
-
@change=${this.onChange}
|
|
229
|
-
>
|
|
230
224
|
<ft-ripple
|
|
231
225
|
?disabled=${this.disabled}
|
|
232
226
|
?primary=${this.checked||this.indeterminate}
|
|
@@ -238,6 +232,13 @@ const tt=Symbol.for(""),it=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)=
|
|
|
238
232
|
d=${this.indeterminate&&!this.checked?"M2,12 22,12":"M1.73,12.91 8.1,19.28 22.79,4.59"}></path>
|
|
239
233
|
</svg>
|
|
240
234
|
</div>
|
|
235
|
+
<input type="checkbox"
|
|
236
|
+
id="checkbox-input"
|
|
237
|
+
name="${this.name}"
|
|
238
|
+
.checked=${this.checked}
|
|
239
|
+
.disabled=${this.disabled}
|
|
240
|
+
@change=${this.onChange}
|
|
241
|
+
>
|
|
241
242
|
</div>
|
|
242
243
|
<ft-typography variant="body2">
|
|
243
244
|
<slot></slot>
|
|
@@ -320,4 +321,4 @@ const tt=Symbol.for(""),it=t=>{var i,e;if((null===(i=t)||void 0===i?void 0:i.r)=
|
|
|
320
321
|
.ft-checkbox--indeterminate .ft-checkbox--checkmark {
|
|
321
322
|
opacity: 1;
|
|
322
323
|
}
|
|
323
|
-
`,Ci([o.property()],Mi.prototype,"name",void 0),Ci([o.property({type:Boolean})],Mi.prototype,"checked",void 0),Ci([o.property({type:Boolean})],Mi.prototype,"indeterminate",void 0),Ci([o.property({type:Boolean})],Mi.prototype,"disabled",void 0),Ci([o.query(".ft-checkbox")],Mi.prototype,"container",void 0),Ci([o.query("ft-ripple")],Mi.prototype,"ripple",void 0),i.customElement("ft-checkbox")(Mi),t.FtCheckbox=Mi,t.FtCheckboxCssVariables=Si,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);
|
|
324
|
+
`,Ci([o.property()],Mi.prototype,"name",void 0),Ci([o.property({type:Boolean,reflect:!0})],Mi.prototype,"checked",void 0),Ci([o.property({type:Boolean})],Mi.prototype,"indeterminate",void 0),Ci([o.property({type:Boolean})],Mi.prototype,"disabled",void 0),Ci([o.query(".ft-checkbox")],Mi.prototype,"container",void 0),Ci([o.query("ft-ripple")],Mi.prototype,"ripple",void 0),i.customElement("ft-checkbox")(Mi),t.FtCheckbox=Mi,t.FtCheckboxCssVariables=Si,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);
|
package/build/ft-checkbox.min.js
CHANGED
|
@@ -309,14 +309,8 @@ const Ut=Symbol.for(""),Ft=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)=
|
|
|
309
309
|
vertical-align: inherit;
|
|
310
310
|
}
|
|
311
311
|
`],Pt([o()],oi.prototype,"element",void 0),Pt([o()],oi.prototype,"variant",void 0),a("ft-typography")(oi);var ri=function(t,e,i,o){for(var r,s=arguments.length,n=s<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(r=t[a])&&(n=(s<3?r(n):s>3?r(e,i,n):r(e,i))||n);return s>3&&n&&Object.defineProperty(e,i,n),n};const si={textColor:lt.extend("--ft-checkbox-text-color",ht.colorOnSurfaceHigh),colorPrimary:lt.external(ht.colorPrimary,"Design system"),colorOnPrimary:lt.external(ht.colorOnPrimary,"Design system"),borderColor:lt.extend("--ft-checkbox-border-color",ht.colorOnSurfaceMedium),colorOnSurfaceDisabled:lt.external(ht.colorOnSurfaceDisabled,"Design system")};class ni extends dt{constructor(){super(...arguments),this.name="",this.checked=!1,this.indeterminate=!1,this.disabled=!1}render(){const t={"ft-checkbox":!0,"ft-checkbox--checked":this.checked,"ft-checkbox--indeterminate":this.indeterminate,"ft-checkbox--disabled":this.disabled};return T`
|
|
312
|
-
<label class="${yt(t)}">
|
|
312
|
+
<label class="${yt(t)}" for="checkbox-input">
|
|
313
313
|
<div class="ft-checkbox--box-container">
|
|
314
|
-
<input type="checkbox"
|
|
315
|
-
name=${this.name}
|
|
316
|
-
.checked=${this.checked}
|
|
317
|
-
.disabled=${this.disabled}
|
|
318
|
-
@change=${this.onChange}
|
|
319
|
-
>
|
|
320
314
|
<ft-ripple
|
|
321
315
|
?disabled=${this.disabled}
|
|
322
316
|
?primary=${this.checked||this.indeterminate}
|
|
@@ -328,6 +322,13 @@ const Ut=Symbol.for(""),Ft=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)=
|
|
|
328
322
|
d=${this.indeterminate&&!this.checked?"M2,12 22,12":"M1.73,12.91 8.1,19.28 22.79,4.59"}></path>
|
|
329
323
|
</svg>
|
|
330
324
|
</div>
|
|
325
|
+
<input type="checkbox"
|
|
326
|
+
id="checkbox-input"
|
|
327
|
+
name="${this.name}"
|
|
328
|
+
.checked=${this.checked}
|
|
329
|
+
.disabled=${this.disabled}
|
|
330
|
+
@change=${this.onChange}
|
|
331
|
+
>
|
|
331
332
|
</div>
|
|
332
333
|
<ft-typography variant="body2">
|
|
333
334
|
<slot></slot>
|
|
@@ -410,4 +411,4 @@ const Ut=Symbol.for(""),Ft=t=>{var e,i;if((null===(e=t)||void 0===e?void 0:e.r)=
|
|
|
410
411
|
.ft-checkbox--indeterminate .ft-checkbox--checkmark {
|
|
411
412
|
opacity: 1;
|
|
412
413
|
}
|
|
413
|
-
`,ri([o()],ni.prototype,"name",void 0),ri([o({type:Boolean})],ni.prototype,"checked",void 0),ri([o({type:Boolean})],ni.prototype,"indeterminate",void 0),ri([o({type:Boolean})],ni.prototype,"disabled",void 0),ri([s(".ft-checkbox")],ni.prototype,"container",void 0),ri([s("ft-ripple")],ni.prototype,"ripple",void 0),a("ft-checkbox")(ni),t.FtCheckbox=ni,t.FtCheckboxCssVariables=si,Object.defineProperty(t,"t",{value:!0})}({});
|
|
414
|
+
`,ri([o()],ni.prototype,"name",void 0),ri([o({type:Boolean,reflect:!0})],ni.prototype,"checked",void 0),ri([o({type:Boolean})],ni.prototype,"indeterminate",void 0),ri([o({type:Boolean})],ni.prototype,"disabled",void 0),ri([s(".ft-checkbox")],ni.prototype,"container",void 0),ri([s("ft-ripple")],ni.prototype,"ripple",void 0),a("ft-checkbox")(ni),t.FtCheckbox=ni,t.FtCheckboxCssVariables=si,Object.defineProperty(t,"t",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-checkbox",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.22",
|
|
4
4
|
"description": "A checkbox component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-ripple": "^0.2.
|
|
23
|
-
"@fluid-topics/ft-typography": "^0.2.
|
|
24
|
-
"@fluid-topics/ft-wc-utils": "^0.2.
|
|
22
|
+
"@fluid-topics/ft-ripple": "^0.2.22",
|
|
23
|
+
"@fluid-topics/ft-typography": "^0.2.22",
|
|
24
|
+
"@fluid-topics/ft-wc-utils": "^0.2.22",
|
|
25
25
|
"lit": "2.1.3"
|
|
26
26
|
},
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "ab090c14b14524bfa890cffb6fe3a38f2362dea9"
|
|
28
28
|
}
|