@fluid-topics/ft-checkbox 0.2.0

package/build/ft-checkbox.js

@@ -0,0 +1,174 @@
+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 { property, query } from "lit/decorators.js";
+import { designSystemVariables, FtCssVariable, FtLitElement } from "@fluid-topics/ft-wc-utils";
+import { classMap } from "lit/directives/class-map.js";
+import { FtRipple } from "@fluid-topics/ft-ripple";
+import { FtTypography } from "@fluid-topics/ft-typography";
+export const FtCheckboxCssVariables = {
+    textColor: FtCssVariable.extend("--ft-checkbox-text-color", designSystemVariables.colorOnSurfaceHigh),
+    colorPrimary: FtCssVariable.external(designSystemVariables.colorPrimary, "Design system"),
+    colorOnPrimary: FtCssVariable.external(designSystemVariables.colorOnPrimary, "Design system"),
+    borderColor: FtCssVariable.extend("--ft-checkbox-border-color", designSystemVariables.colorOnSurfaceMedium),
+    colorOnSurfaceDisabled: FtCssVariable.external(designSystemVariables.colorOnSurfaceDisabled, "Design system"),
+};
+export class FtCheckbox extends FtLitElement {
+    constructor() {
+        super(...arguments);
+        this.name = "";
+        this.checked = false;
+        this.indeterminate = false;
+        this.disabled = false;
+    }
+    render() {
+        const classes = {
+            "ft-checkbox": true,
+            "ft-checkbox--checked": this.checked,
+            "ft-checkbox--indeterminate": this.indeterminate,
+            "ft-checkbox--disabled": this.disabled,
+        };
+        return html `
+            <label class="${classMap(classes)}">
+                <div class="ft-checkbox--box-container">
+                    <input type="checkbox"
+                           name=${this.name}
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                    >
+                    <ft-ripple
+                            ?disabled=${this.disabled}
+                            ?primary=${this.checked || this.indeterminate}
+                            unbounded>
+                    </ft-ripple>
+                    <div class="ft-checkbox--box">
+                        <svg class="ft-checkbox--checkmark" viewBox="0 0 24 24">
+                            <path class="ft-checkbox--checkmark-path" fill="none"
+                                  d=${(this.indeterminate && !this.checked) ? "M2,12 22,12" : "M1.73,12.91 8.1,19.28 22.79,4.59"}></path>
+                        </svg>
+                    </div>
+                </div>
+                <ft-typography variant="body2">
+                    <slot></slot>
+                </ft-typography>
+            </label>
+        `;
+    }
+    onChange(event) {
+        event.stopPropagation();
+        this.checked = event.target.checked;
+        this.indeterminate = false;
+        this.dispatchEvent(new CustomEvent("change", { detail: this.checked }));
+    }
+    contentAvailableCallback(props) {
+        var _a;
+        super.contentAvailableCallback(props);
+        (_a = this.ripple) === null || _a === void 0 ? void 0 : _a.setupFor(this.container);
+    }
+}
+FtCheckbox.elementDefinitions = {
+    "ft-ripple": FtRipple,
+    "ft-typography": FtTypography
+};
+// language=CSS
+FtCheckbox.styles = css `
+        * {
+            box-sizing: border-box;
+        }
+
+        .ft-checkbox {
+            box-sizing: border-box;
+            color: ${FtCheckboxCssVariables.textColor};
+
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .ft-checkbox--disabled {
+            color: ${FtCheckboxCssVariables.colorOnSurfaceDisabled};
+        }
+
+        input {
+            opacity: 0;
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            margin: 0;
+        }
+
+        .ft-checkbox--box-container {
+            position: relative;
+            width: 40px;
+            height: 40px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        .ft-checkbox--box {
+            border: 2px solid ${FtCheckboxCssVariables.borderColor};
+            border-radius: 2px;
+
+            width: 18px;
+            height: 18px;
+
+            color: ${FtCheckboxCssVariables.colorOnPrimary};
+        }
+
+
+        .ft-checkbox--checked .ft-checkbox--box,
+        .ft-checkbox--indeterminate .ft-checkbox--box {
+            border-color: ${FtCheckboxCssVariables.colorPrimary};
+            background-color: ${FtCheckboxCssVariables.colorPrimary};
+        }
+
+        .ft-checkbox--disabled .ft-checkbox--box {
+            border-color: ${FtCheckboxCssVariables.colorOnSurfaceDisabled};
+            background-color: transparent;
+            color: ${FtCheckboxCssVariables.colorOnSurfaceDisabled};
+        }
+
+        .ft-checkbox--checkmark {
+            transition: opacity 180ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 180ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+            opacity: 0;
+        }
+
+        .ft-checkbox--checkmark-path {
+            stroke-dashoffset: 0;
+            stroke: currentcolor;
+            stroke-width: 3px;
+            stroke-dasharray: 30;
+        }
+
+        .ft-checkbox--checked .ft-checkbox--checkmark,
+        .ft-checkbox--indeterminate .ft-checkbox--checkmark {
+            opacity: 1;
+        }
+    `;
+__decorate([
+    property()
+], FtCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], FtCheckbox.prototype, "disabled", void 0);
+__decorate([
+    query(".ft-checkbox")
+], FtCheckbox.prototype, "container", void 0);
+__decorate([
+    query("ft-ripple")
+], FtCheckbox.prototype, "ripple", void 0);
+//# sourceMappingURL=ft-checkbox.js.map

package/build/ft-checkbox.light.js

@@ -0,0 +1,308 @@
+!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=i.FtCssVariable.extend("--ft-ripple-primary-color",i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorPrimary)),p=i.FtCssVariable.extend("--ft-ripple-secondary-color",i.FtCssVariable.extend("--ft-ripple-color",i.designSystemVariables.colorSecondary)),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");class y 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.onTransitionStart=t=>{"transform"===t.propertyName&&(this.rippling=this.pressed)},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`
+            <style>
+                .ft-ripple .ft-ripple--effect,
+                .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+                    width: ${this.rippleSize}px;
+                    height: ${this.rippleSize}px;
+                }
+
+                .ft-ripple .ft-ripple--effect {
+                    left: ${this.originX}px;
+                    top: ${this.originY}px;
+                }
+            </style>
+            <div class="${s.classMap(t)}">
+                <div class="ft-ripple--background"></div>
+                <div class="ft-ripple--effect"></div>
+            </div>
+        `}contentAvailableCallback(t){super.contentAvailableCallback(t),this.ripple&&this.resizeObserver.observe(this.ripple),this.rippleEffect&&this.rippleEffect.ontransitionstart!==this.onTransitionStart&&(this.rippleEffect.ontransitionstart=this.onTransitionStart,this.rippleEffect.ontransitionend=this.onTransitionEnd)}updated(t){super.updated(t),t.has("disabled")&&this.disabled&&this.endRipple(),t.has("unbounded")&&this.setRippleSize()}endRipple(){this.endHover(),this.endFocus(),this.endPress(),this.rippling=!1}setRippleSize(){if(this.ripple){const t=this.ripple.getBoundingClientRect();this.rippleSize=(this.unbounded?1:1.7)*Math.max(t.width,t.height)}}connectedCallback(){var t;super.connectedCallback();const i=null===(t=this.shadowRoot)||void 0===t?void 0:t.host.parentElement;i&&this.setupFor(i),this.setRippleSize()}setupFor(t){if(this.target===t)return;this.onDisconnect&&this.onDisconnect(),this.target=t,t.setAttribute("data-is-ft-ripple-target","true");const i=(...t)=>i=>{t.forEach((t=>window.addEventListener(t,this.endPress,{once:!0}))),this.startPress(i)},e=i("mouseup","contextmenu"),o=i("touchend","touchcancel"),s=t=>{["Enter"," "].includes(t.key)&&i("keyup")(t)};t.addEventListener("mouseover",this.startHover),t.addEventListener("mousemove",this.moveRipple),t.addEventListener("mouseleave",this.endHover),t.addEventListener("mousedown",e),t.addEventListener("touchstart",o),t.addEventListener("touchmove",this.moveRipple),t.addEventListener("keydown",s),t.addEventListener("focus",this.startFocus),t.addEventListener("blur",this.endFocus),t.addEventListener("focusin",this.startFocus),t.addEventListener("focusout",this.endFocus),this.onDisconnect=()=>{t.removeAttribute("data-is-ft-ripple-target"),t.removeEventListener("mouseover",this.startHover),t.removeEventListener("mousemove",this.moveRipple),t.removeEventListener("mouseleave",this.endHover),t.removeEventListener("mousedown",e),t.removeEventListener("touchstart",o),t.removeEventListener("touchmove",this.moveRipple),t.removeEventListener("keydown",s),t.removeEventListener("focus",this.startFocus),t.removeEventListener("blur",this.endFocus),t.removeEventListener("focusin",this.startFocus),t.removeEventListener("focusout",this.endFocus),this.onDisconnect=void 0}}getCoordinates(t){const i=t,e=t;let o,s;return null!=i.x?({x:o,y:s}=i):null!=e.touches&&(o=e.touches[0].clientX,s=e.touches[0].clientY),{x:o,y:s}}isIgnored(t){if(this.disabled)return!0;if(null!=t)for(let i of t.composedPath()){if(i===this.target)break;if("hasAttribute"in i&&i.hasAttribute("data-is-ft-ripple-target"))return!0}return!1}disconnectedCallback(){super.disconnectedCallback(),this.onDisconnect&&this.onDisconnect(),this.resizeObserver.disconnect(),this.endRipple()}}
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+var d;y.elementDefinitions={},y.styles=e.css`
+        :host {
+            display: contents;
+        }
+
+        .ft-ripple {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+        }
+
+        .ft-ripple:not(.ft-ripple--unbounded) {
+            overflow: hidden;
+        }
+
+        .ft-ripple .ft-ripple--background,
+        .ft-ripple .ft-ripple--effect {
+            position: absolute;
+            opacity: 0;
+            background-color: ${n};
+        }
+
+        .ft-ripple.ft-ripple--secondary .ft-ripple--background,
+        .ft-ripple.ft-ripple--secondary .ft-ripple--effect {
+            background-color: ${p};
+        }
+
+        .ft-ripple.ft-ripple--primary .ft-ripple--background,
+        .ft-ripple.ft-ripple--primary .ft-ripple--effect {
+            background-color: ${h};
+        }
+
+        .ft-ripple .ft-ripple--background {
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+        }
+
+        .ft-ripple .ft-ripple--effect,
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            border-radius: 50%;
+        }
+
+        .ft-ripple .ft-ripple--effect {
+            transform: translate(-50%, -50%) scale(0.15);
+            transition: transform 300ms ease, opacity 75ms linear;
+        }
+
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--effect,
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            left: 50%;
+            top: 50%;
+        }
+
+        .ft-ripple.ft-ripple--unbounded .ft-ripple--background {
+            transform: translate(-50%, -50%);
+        }
+
+        .ft-ripple.ft-ripple--hovered .ft-ripple--background {
+            opacity: ${a};
+        }
+
+        .ft-ripple.ft-ripple--selected .ft-ripple--background {
+            opacity: ${c};
+        }
+
+        .ft-ripple.ft-ripple--focused .ft-ripple--background {
+            opacity: ${f};
+        }
+
+        .ft-ripple.ft-ripple--pressed .ft-ripple--effect {
+            opacity: ${l};
+            transform: translate(-50%, -50%) scale(1);
+        }
+    `,r([o.property({type:Boolean})],y.prototype,"primary",void 0),r([o.property({type:Boolean})],y.prototype,"secondary",void 0),r([o.property({type:Boolean})],y.prototype,"unbounded",void 0),r([o.property({type:Boolean})],y.prototype,"activated",void 0),r([o.property({type:Boolean})],y.prototype,"selected",void 0),r([o.property({type:Boolean})],y.prototype,"disabled",void 0),r([o.state()],y.prototype,"hovered",void 0),r([o.state()],y.prototype,"focused",void 0),r([o.state()],y.prototype,"pressed",void 0),r([o.state()],y.prototype,"rippling",void 0),r([o.state()],y.prototype,"rippleSize",void 0),r([o.state()],y.prototype,"originX",void 0),r([o.state()],y.prototype,"originY",void 0),r([o.query(".ft-ripple")],y.prototype,"ripple",void 0),r([o.query(".ft-ripple--effect")],y.prototype,"rippleEffect",void 0),i.customElement("ft-ripple")(y);const g=globalThis.trustedTypes,u=g?g.createPolicy("lit-html",{createHTML:t=>t}):void 0,b=`lit$${(Math.random()+"").slice(9)}$`,v="?"+b,m=`<${v}>`,x=document,$=(t="")=>x.createComment(t),k=t=>null===t||"object"!=typeof t&&"function"!=typeof t,w=Array.isArray,z=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,A=/-->/g,_=/>/g,S=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,C=/'/g,O=/"/g,M=/^(?:script|style|textarea|title)$/i,N=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),B=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),j=new WeakMap,T=x.createTreeWalker(x,129,null,!1),D=(t,i)=>{const e=t.length-1,o=[];let s,r=2===i?"<svg>":"",n=z;for(let i=0;i<e;i++){const e=t[i];let h,p,l=-1,a=0;for(;a<e.length&&(n.lastIndex=a,p=n.exec(e),null!==p);)a=n.lastIndex,n===z?"!--"===p[1]?n=A:void 0!==p[1]?n=_:void 0!==p[2]?(M.test(p[2])&&(s=RegExp("</"+p[2],"g")),n=S):void 0!==p[3]&&(n=S):n===S?">"===p[0]?(n=null!=s?s:z,l=-1):void 0===p[1]?l=-2:(l=n.lastIndex-p[2].length,h=p[1],n=void 0===p[3]?S:'"'===p[3]?O:C):n===O||n===C?n=S:n===A||n===_?n=z:(n=S,s=void 0);const f=n===S&&t[i+1].startsWith("/>")?" ":"";r+=n===z?e+m:l>=0?(o.push(h),e.slice(0,l)+"$lit$"+e.slice(l)+b+f):e+b+(-2===l?(o.push(void 0),i):f)}const h=r+(t[e]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==u?u.createHTML(h):h,o]};class I{constructor({strings:t,_$litType$:i},e){let o;this.parts=[];let s=0,r=0;const n=t.length-1,h=this.parts,[p,l]=D(t,i);if(this.el=I.createElement(p,e),T.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(o=T.nextNode())&&h.length<n;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const i of o.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(b)){const e=l[r++];if(t.push(i),void 0!==e){const t=o.getAttribute(e.toLowerCase()+"$lit$").split(b),i=/([.?@])?(.*)/.exec(e);h.push({type:1,index:s,name:i[2],strings:t,ctor:"."===i[1]?W:"?"===i[1]?H:"@"===i[1]?K:G})}else h.push({type:6,index:s})}for(const i of t)o.removeAttribute(i)}if(M.test(o.tagName)){const t=o.textContent.split(b),i=t.length-1;if(i>0){o.textContent=g?g.emptyScript:"";for(let e=0;e<i;e++)o.append(t[e],$()),T.nextNode(),h.push({type:2,index:++s});o.append(t[i],$())}}}else if(8===o.nodeType)if(o.data===v)h.push({type:2,index:s});else{let t=-1;for(;-1!==(t=o.data.indexOf(b,t+1));)h.push({type:7,index:s}),t+=b.length-1}s++}}static createElement(t,i){const e=x.createElement("template");return e.innerHTML=t,e}}function U(t,i,e=t,o){var s,r,n,h;if(i===B)return i;let p=void 0!==o?null===(s=e._$Cl)||void 0===s?void 0:s[o]:e._$Cu;const l=k(i)?void 0:i._$litDirective$;return(null==p?void 0:p.constructor)!==l&&(null===(r=null==p?void 0:p._$AO)||void 0===r||r.call(p,!1),void 0===l?p=void 0:(p=new l(t),p._$AT(t,e,o)),void 0!==o?(null!==(n=(h=e)._$Cl)&&void 0!==n?n:h._$Cl=[])[o]=p:e._$Cu=p),void 0!==p&&(i=U(t,p._$AS(t,i.values),p,o)),i}class R{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:e},parts:o}=this._$AD,s=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:x).importNode(e,!0);T.currentNode=s;let r=T.nextNode(),n=0,h=0,p=o[0];for(;void 0!==p;){if(n===p.index){let i;2===p.type?i=new Z(r,r.nextSibling,this,t):1===p.type?i=new p.ctor(r,p.name,p.strings,this,t):6===p.type&&(i=new P(r,this,t)),this.v.push(i),p=o[++h]}n!==(null==p?void 0:p.index)&&(r=T.nextNode(),n++)}return s}m(t){let i=0;for(const e of this.v)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class Z{constructor(t,i,e,o){var s;this.type=2,this._$AH=E,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=o,this._$Cg=null===(s=null==o?void 0:o.isConnected)||void 0===s||s}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=U(this,t,i),k(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==B&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var i;return w(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==E&&k(this._$AH)?this._$AA.nextSibling.data=t:this.S(x.createTextNode(t)),this._$AH=t}T(t){var i;const{values:e,_$litType$:o}=t,s="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=I.createElement(o.h,this.options)),o);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===s)this._$AH.m(e);else{const t=new R(s,this),i=t.p(this.options);t.m(e),this.S(i),this._$AH=t}}_$AC(t){let i=j.get(t.strings);return void 0===i&&j.set(t.strings,i=new I(t)),i}A(t){w(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,o=0;for(const s of t)o===i.length?i.push(e=new Z(this.M($()),this.M($()),this,this.options)):e=i[o],e._$AI(s),o++;o<i.length&&(this._$AR(e&&e._$AB.nextSibling,o),i.length=o)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class G{constructor(t,i,e,o,s){this.type=1,this._$AH=E,this._$AN=void 0,this.element=t,this.name=i,this._$AM=o,this.options=s,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=E}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,o){const s=this.strings;let r=!1;if(void 0===s)t=U(this,t,i,0),r=!k(t)||t!==this._$AH&&t!==B,r&&(this._$AH=t);else{const o=t;let n,h;for(t=s[0],n=0;n<s.length-1;n++)h=U(this,o[e+n],i,n),h===B&&(h=this._$AH[n]),r||(r=!k(h)||h!==this._$AH[n]),h===E?t=E:t!==E&&(t+=(null!=h?h:"")+s[n+1]),this._$AH[n]=h}r&&!o&&this.k(t)}k(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class W extends G{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===E?void 0:t}}const F=g?g.emptyScript:"";class H extends G{constructor(){super(...arguments),this.type=4}k(t){t&&t!==E?this.element.setAttribute(this.name,F):this.element.removeAttribute(this.name)}}class K extends G{constructor(t,i,e,o,s){super(t,i,e,o,s),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=U(this,t,i,0))&&void 0!==e?e:E)===B)return;const o=this._$AH,s=t===E&&o!==E||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,r=t!==E&&(o===E||s);s&&this.element.removeEventListener(this.name,this,o),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class P{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){U(this,t)}}const L=window.litHtmlPolyfillSupport;null==L||L(I,Z),(null!==(d=globalThis.litHtmlVersions)&&void 0!==d?d:globalThis.litHtmlVersions=[]).push("2.1.3");
+/**
+     * @license
+     * Copyright 2020 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+const X=t=>({_$litStatic$:t}),Y=new Map,q=(t=>(i,...e)=>{var o;const s=e.length;let r,n;const h=[],p=[];let l,a=0,f=!1;for(;a<s;){for(l=i[a];a<s&&void 0!==(n=e[a],r=null===(o=n)||void 0===o?void 0:o._$litStatic$);)l+=r+i[++a],f=!0;p.push(n),h.push(l),a++}if(a===s&&h.push(i[s]),f){const t=h.join("$$lit$$");void 0===(i=Y.get(t))&&(h.raw=h,Y.set(t,i=h)),e=p}return t(i,...e)})(N);var J,Q=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"}(J||(J={}));const V=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.titleFont),tt=i.FtCssVariable.extend("--ft-typography-font-family",i.designSystemVariables.contentFont),it={fontFamily:tt,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","SIZE","24px"),textTransform:i.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},et=i.FtCssVariable.extend("--ft-typography-title-font-family",V),ot=i.FtCssVariable.extend("--ft-typography-title-font-size",it.fontSize,"20px"),st=i.FtCssVariable.extend("--ft-typography-title-font-weight",it.fontWeight,"normal"),rt=i.FtCssVariable.extend("--ft-typography-title-letter-spacing",it.letterSpacing,"0.15px"),nt=i.FtCssVariable.extend("--ft-typography-title-line-height",it.lineHeight,"24px"),ht=i.FtCssVariable.extend("--ft-typography-title-text-transform",it.textTransform,"inherit"),pt=i.FtCssVariable.extend("--ft-typography-title-dense-font-family",V),lt=i.FtCssVariable.extend("--ft-typography-title-dense-font-size",it.fontSize,"14px"),at=i.FtCssVariable.extend("--ft-typography-title-dense-font-weight",it.fontWeight,"normal"),ft=i.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",it.letterSpacing,"0.105px"),ct=i.FtCssVariable.extend("--ft-typography-title-dense-line-height",it.lineHeight,"24px"),yt=i.FtCssVariable.extend("--ft-typography-title-dense-text-transform",it.textTransform,"inherit"),dt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-family",tt),gt=i.FtCssVariable.extend("--ft-typography-subtitle1-font-size",it.fontSize,"16px"),ut=i.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",it.fontWeight,"600"),bt=i.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",it.letterSpacing,"0.144px"),vt=i.FtCssVariable.extend("--ft-typography-subtitle1-line-height",it.lineHeight,"24px"),mt=i.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",it.textTransform,"inherit"),xt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-family",tt),$t=i.FtCssVariable.extend("--ft-typography-subtitle2-font-size",it.fontSize,"14px"),kt=i.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",it.fontWeight,"normal"),wt=i.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",it.letterSpacing,"0.098px"),zt=i.FtCssVariable.extend("--ft-typography-subtitle2-line-height",it.lineHeight,"24px"),At=i.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",it.textTransform,"inherit"),_t=i.FtCssVariable.extend("--ft-typography-body1-font-family",tt),St=i.FtCssVariable.extend("--ft-typography-body1-font-size",it.fontSize,"16px"),Ct=i.FtCssVariable.extend("--ft-typography-body1-font-weight",it.fontWeight,"normal"),Ot=i.FtCssVariable.extend("--ft-typography-body1-letter-spacing",it.letterSpacing,"0.496px"),Mt=i.FtCssVariable.extend("--ft-typography-body1-line-height",it.lineHeight,"24px"),Nt=i.FtCssVariable.extend("--ft-typography-body1-text-transform",it.textTransform,"inherit"),Bt=i.FtCssVariable.extend("--ft-typography-body2-font-family",tt),Et=i.FtCssVariable.extend("--ft-typography-body2-font-size",it.fontSize,"14px"),jt=i.FtCssVariable.extend("--ft-typography-body2-font-weight",it.fontWeight,"normal"),Tt=i.FtCssVariable.extend("--ft-typography-body2-letter-spacing",it.letterSpacing,"0.252px"),Dt=i.FtCssVariable.extend("--ft-typography-body2-line-height",it.lineHeight,"20px"),It=i.FtCssVariable.extend("--ft-typography-body2-text-transform",it.textTransform,"inherit"),Ut=i.FtCssVariable.extend("--ft-typography-caption-font-family",tt),Rt=i.FtCssVariable.extend("--ft-typography-caption-font-size",it.fontSize,"12px"),Zt=i.FtCssVariable.extend("--ft-typography-caption-font-weight",it.fontWeight,"normal"),Gt=i.FtCssVariable.extend("--ft-typography-caption-letter-spacing",it.letterSpacing,"0.396px"),Wt=i.FtCssVariable.extend("--ft-typography-caption-line-height",it.lineHeight,"16px"),Ft=i.FtCssVariable.extend("--ft-typography-caption-text-transform",it.textTransform,"inherit"),Ht=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",tt),Kt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",it.fontSize,"10px"),Pt=i.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",it.fontWeight,"normal"),Lt=i.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",it.letterSpacing,"0.33px"),Xt=i.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",it.lineHeight,"16px"),Yt=i.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",it.textTransform,"inherit"),qt=i.FtCssVariable.extend("--ft-typography-overline-font-family",tt),Jt=i.FtCssVariable.extend("--ft-typography-overline-font-size",it.fontSize,"10px"),Qt=i.FtCssVariable.extend("--ft-typography-overline-font-weight",it.fontWeight,"normal"),Vt=i.FtCssVariable.extend("--ft-typography-overline-letter-spacing",it.letterSpacing,"1.5px"),ti=i.FtCssVariable.extend("--ft-typography-overline-line-height",it.lineHeight,"16px"),ii=i.FtCssVariable.extend("--ft-typography-overline-text-transform",it.textTransform,"uppercase"),ei=i.FtCssVariable.extend("--ft-typography-button-font-family",tt),oi=i.FtCssVariable.extend("--ft-typography-button-font-size",it.fontSize,"14px"),si=i.FtCssVariable.extend("--ft-typography-button-font-weight",it.fontWeight,"600"),ri=i.FtCssVariable.extend("--ft-typography-button-letter-spacing",it.letterSpacing,"1.246px"),ni=i.FtCssVariable.extend("--ft-typography-button-line-height",it.lineHeight,"16px"),hi=i.FtCssVariable.extend("--ft-typography-button-text-transform",it.textTransform,"uppercase"),pi=e.css`
+    .ft-typography--title {
+        font-family: ${et};
+        font-size: ${ot};
+        font-weight: ${st};
+        letter-spacing: ${rt};
+        line-height: ${nt};
+        text-transform: ${ht};
+    }
+`,li=e.css`
+    .ft-typography--title-dense {
+        font-family: ${pt};
+        font-size: ${lt};
+        font-weight: ${at};
+        letter-spacing: ${ft};
+        line-height: ${ct};
+        text-transform: ${yt};
+    }
+`,ai=e.css`
+    .ft-typography--subtitle1 {
+        font-family: ${dt};
+        font-size: ${gt};
+        font-weight: ${ut};
+        letter-spacing: ${bt};
+        line-height: ${vt};
+        text-transform: ${mt};
+    }
+`,fi=e.css`
+    .ft-typography--subtitle2 {
+        font-family: ${xt};
+        font-size: ${$t};
+        font-weight: ${kt};
+        letter-spacing: ${wt};
+        line-height: ${zt};
+        text-transform: ${At};
+    }
+
+`,ci=e.css`
+    .ft-typography--body1 {
+        font-family: ${_t};
+        font-size: ${St};
+        font-weight: ${Ct};
+        letter-spacing: ${Ot};
+        line-height: ${Mt};
+        text-transform: ${Nt};
+    }
+`,yi=e.css`
+    .ft-typography--body2 {
+        font-family: ${Bt};
+        font-size: ${Et};
+        font-weight: ${jt};
+        letter-spacing: ${Tt};
+        line-height: ${Dt};
+        text-transform: ${It};
+    }
+`,di=e.css`
+    .ft-typography--caption {
+        font-family: ${Ut};
+        font-size: ${Rt};
+        font-weight: ${Zt};
+        letter-spacing: ${Gt};
+        line-height: ${Wt};
+        text-transform: ${Ft};
+    }
+`,gi=e.css`
+    .ft-typography--breadcrumb {
+        font-family: ${Ht};
+        font-size: ${Kt};
+        font-weight: ${Pt};
+        letter-spacing: ${Lt};
+        line-height: ${Xt};
+        text-transform: ${Yt};
+    }
+`,ui=e.css`
+    .ft-typography--overline {
+        font-family: ${qt};
+        font-size: ${Jt};
+        font-weight: ${Qt};
+        letter-spacing: ${Vt};
+        line-height: ${ti};
+        text-transform: ${ii};
+    }
+`,bi=e.css`
+    .ft-typography--button {
+        font-family: ${ei};
+        font-size: ${oi};
+        font-weight: ${si};
+        letter-spacing: ${ri};
+        line-height: ${ni};
+        text-transform: ${hi};
+    }
+`;class vi extends i.FtLitElement{constructor(){super(...arguments),this.variant=J.body1}render(){return this.element?q`
+                <${X(this.element)}
+                        class="ft-typography ft-typography--${this.variant}">
+                    <slot></slot>
+                </${X(this.element)}>
+            `:q`
+            <slot class="ft-typography ft-typography--${this.variant}"></slot>
+        `}}vi.styles=[pi,li,ai,fi,ci,yi,di,gi,ui,bi,e.css`
+            .ft-typography {
+                vertical-align: inherit;
+            }
+        `],Q([o.property()],vi.prototype,"element",void 0),Q([o.property()],vi.prototype,"variant",void 0),i.customElement("ft-typography")(vi);var mi=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 xi={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 $i 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`
+            <label class="${s.classMap(t)}">
+                <div class="ft-checkbox--box-container">
+                    <input type="checkbox"
+                           name=${this.name}
+                           .checked=${this.checked}
+                           .disabled=${this.disabled}
+                           @change=${this.onChange}
+                    >
+                    <ft-ripple
+                            ?disabled=${this.disabled}
+                            ?primary=${this.checked||this.indeterminate}
+                            unbounded>
+                    </ft-ripple>
+                    <div class="ft-checkbox--box">
+                        <svg class="ft-checkbox--checkmark" viewBox="0 0 24 24">
+                            <path class="ft-checkbox--checkmark-path" fill="none"
+                                  d=${this.indeterminate&&!this.checked?"M2,12 22,12":"M1.73,12.91 8.1,19.28 22.79,4.59"}></path>
+                        </svg>
+                    </div>
+                </div>
+                <ft-typography variant="body2">
+                    <slot></slot>
+                </ft-typography>
+            </label>
+        `}onChange(t){t.stopPropagation(),this.checked=t.target.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("change",{detail:this.checked}))}contentAvailableCallback(t){var i;super.contentAvailableCallback(t),null===(i=this.ripple)||void 0===i||i.setupFor(this.container)}}$i.elementDefinitions={"ft-ripple":y,"ft-typography":vi},$i.styles=e.css`
+        * {
+            box-sizing: border-box;
+        }
+
+        .ft-checkbox {
+            box-sizing: border-box;
+            color: ${xi.textColor};
+
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .ft-checkbox--disabled {
+            color: ${xi.colorOnSurfaceDisabled};
+        }
+
+        input {
+            opacity: 0;
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            margin: 0;
+        }
+
+        .ft-checkbox--box-container {
+            position: relative;
+            width: 40px;
+            height: 40px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+
+        .ft-checkbox--box {
+            border: 2px solid ${xi.borderColor};
+            border-radius: 2px;
+
+            width: 18px;
+            height: 18px;
+
+            color: ${xi.colorOnPrimary};
+        }
+
+
+        .ft-checkbox--checked .ft-checkbox--box,
+        .ft-checkbox--indeterminate .ft-checkbox--box {
+            border-color: ${xi.colorPrimary};
+            background-color: ${xi.colorPrimary};
+        }
+
+        .ft-checkbox--disabled .ft-checkbox--box {
+            border-color: ${xi.colorOnSurfaceDisabled};
+            background-color: transparent;
+            color: ${xi.colorOnSurfaceDisabled};
+        }
+
+        .ft-checkbox--checkmark {
+            transition: opacity 180ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 180ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+            opacity: 0;
+        }
+
+        .ft-checkbox--checkmark-path {
+            stroke-dashoffset: 0;
+            stroke: currentcolor;
+            stroke-width: 3px;
+            stroke-dasharray: 30;
+        }
+
+        .ft-checkbox--checked .ft-checkbox--checkmark,
+        .ft-checkbox--indeterminate .ft-checkbox--checkmark {
+            opacity: 1;
+        }
+    `,mi([o.property()],$i.prototype,"name",void 0),mi([o.property({type:Boolean})],$i.prototype,"checked",void 0),mi([o.property({type:Boolean})],$i.prototype,"indeterminate",void 0),mi([o.property({type:Boolean})],$i.prototype,"disabled",void 0),mi([o.query(".ft-checkbox")],$i.prototype,"container",void 0),mi([o.query("ft-ripple")],$i.prototype,"ripple",void 0),i.customElement("ft-checkbox")($i),t.FtCheckbox=$i,t.FtCheckboxCssVariables=xi,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litClassMap);