@c2n/checkbox 0.0.1

package/README.md

@@ -0,0 +1,27 @@
+# Checkbox
+
+Following m3 specs : https://m3.material.io/components/switch/specs
+
+## States
+
+![State](assets/checkbox-state.png)
+
+### Matrix of states
+
+| Interaction/mode | Selected | Unselected | Indeterminate |
+| ---------------- | -------- | ---------- | ------------- |
+| Enabled          |          |            |               |
+| Hover            |          |            |               |
+| Focus            |          |            |               |
+| Pressed          |          |            |               |
+| Error            |          |            |               |
+| Disabled         |          |            |               |
+
+## Theme properties
+
+- border-radius
+- background-color
+- border-color
+- icon-color
+- state-color
+- state-opacity

package/dist/checkbox.js

@@ -0,0 +1,104 @@
+import { unsafeCSS as l, LitElement as k, html as s } from "lit";
+import { query as x, property as t, state as p, customElement as u } from "lit/decorators.js";
+import { ifDefined as r } from "lit/directives/if-defined.js";
+const m = `:host{display:inline-flex}.c2-checkbox{display:inline-flex;position:relative;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom;z-index:0;align-items:center;justify-content:center;flex-direction:column;width:var(--c2-checkbox-touch-target-size, 48px);height:var(--c2-checkbox-touch-target-size, 48px)}.c2-checkbox-input{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;width:var(--c2-checkbox-touch-target-size, 48px);height:var(--c2-checkbox-touch-target-size, 48px)}.c2-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;border-style:solid;background-color:transparent;pointer-events:none;will-change:background-color,border-color;transition:transition-exit(background-color),transition-exit(border-color);width:var(--c2-checkbox-container-width, 18px);height:var(--c2-checkbox-container-height, 18px);border-radius:var(--c2-checkbox-container-border-radius, 5px)}::slotted(svg[slot=checkmark]),.c2-checkbox__checkmark{position:absolute;width:var(--c2-checkbox-checkmark-size, 14px);height:var(--c2-checkbox-checkmark-size, 14px);transition:transition-exit(opacity,0ms,.18s);opacity:0}::slotted(svg[slot=mixedmark]),.c2-checkbox__mixedmark{position:absolute;width:var(--c2-checkbox-mixedmark-size, 14px);height:var(--c2-checkbox-mixedmark-size, 14px);transform:scaleX(0) rotate(0);opacity:0;transition:transition-exit(opacity),transition-exit(transform)}.c2-checkbox-state-layer{position:absolute;width:var(--c2-checkbox-state-layer-size, 40px);height:var(--c2-checkbox-state-layer-size, 40px);border-radius:var(--c2-checkbox-state-layer-border-radius, 9999px);background-color:transparent;opacity:0;pointer-events:none;will-change:background-color,opacity}.c2-checkbox-input:not(:checked):not(:indeterminate):enabled~.c2-checkbox__background{border-width:var(--c2-checkbox-container-border-width, 1.5px);border-color:var(--c2-checkbox-container-border-color, #bcbcc6)}.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9)}.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:0}.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background ::slotted(svg[slot=mixedmark]),.c2-checkbox-input:indeterminate:enabled~.c2-checkbox__background .c2-checkbox__mixedmark{opacity:1;transform:scaleX(1) rotate(0);color:var(--c2-checkbox-mixedmark-color, #fff)}.c2-checkbox-input:checked:enabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9)}.c2-checkbox-input:checked:enabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:checked:enabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:1;color:var(--c2-checkbox-checkmark-color, #fff)}.c2-checkbox-input:not(:checked):not(:indeterminate):disabled~.c2-checkbox__background{border-width:var(--c2-checkbox-container-border-width, 1.5px);border-color:var(--c2-checkbox-container-border-color, #bcbcc6);opacity:var(--c2-checkbox-disabled-opacity, .38)}.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9);opacity:var(--c2-checkbox-disabled-opacity, .38)}.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:0}.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background ::slotted(svg[slot=mixedmark]),.c2-checkbox-input:indeterminate:disabled~.c2-checkbox__background .c2-checkbox__mixedmark{opacity:1;transform:scaleX(1) rotate(0);color:var(--c2-checkbox-mixedmark-color, #fff)}.c2-checkbox-input:checked:disabled~.c2-checkbox__background{border-width:0;background-color:var(--c2-checkbox-container-enabled-selected-color, #476ef9);opacity:var(--c2-checkbox-disabled-opacity, .38)}.c2-checkbox-input:checked:disabled~.c2-checkbox__background ::slotted(svg[slot=checkmark]),.c2-checkbox-input:checked:disabled~.c2-checkbox__background .c2-checkbox__checkmark{opacity:1;color:var(--c2-checkbox-checkmark-color, #fff)}.c2-checkbox-input:not(:checked):not(:indeterminate):enabled:hover~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-unselected-color, #bcbcc6);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:indeterminate:enabled:hover~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:checked:enabled:hover~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:not(:checked):not(:indeterminate):enabled:focus~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-unselected-color, #bcbcc6);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:indeterminate:enabled:focus~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox-input:checked:enabled:focus~.c2-checkbox-state-layer{background-color:var(--c2-checkbox-state-layer-hover-indeterminate-color, #476ef9);opacity:var(--c2-checkbox-state-layer-hover-opacity, .08)}.c2-checkbox__background--marked{transition:background-color 90ms cubic-bezier(0,0,.2,1),border-color 90ms cubic-bezier(0,0,.2,1)}
+`;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (a, i, b, n) => {
+  for (var o = n > 1 ? void 0 : n ? y(i, b) : i, h = a.length - 1, d; h >= 0; h--)
+    (d = a[h]) && (o = (n ? d(i, b, o) : d(o)) || o);
+  return n && o && v(i, b, o), o;
+};
+let e = class extends k {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.name = "", this.showFocusRing = !1;
+  }
+  render() {
+    const a = this.indeterminate ? "mixed" : void 0;
+    return s`
+      <div class="c2-checkbox">
+        ${this.renderStateLayer()}
+        <input
+          class="c2-checkbox-input"
+          type="checkbox"
+          name="${r(this.name)}"
+          aria-checked="${r(a)}"
+          aria-label="${r(this.ariaLabel)}"
+          aria-labelledby="${r(this.ariaLabelledBy)}"
+          aria-describedby="${r(this.ariaDescribedBy)}"
+          ?disabled="${this.disabled}"
+          .indeterminate="${this.indeterminate}"
+          ?checked="${this.checked}"
+          @change="${this.handleChange}"
+          @focus="${this.handleFocus}"
+          @blur="${this.handleBlur}"
+        />
+        <div class="c2-checkbox__background">
+          <slot name="checkmark">
+            <svg class="c2-checkbox__checkmark" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
+            </svg>
+          </slot>
+          <slot name="mixedmark">
+            <svg class="c2-checkbox__mixedmark" c2-checkbox__mixedmark viewBox="0 0 24 24">
+              <path fill="currentColor" d="M19 13H5v-2h14v2z" />
+            </svg>
+          </slot>
+        </div>
+        <div class="c2-checkbox-state-layer"></div>
+      </div>
+    `;
+  }
+  renderCheckBox() {
+  }
+  renderStateLayer() {
+    return s``;
+  }
+  handleChange() {
+    this.checked = this.formElement.checked, this.indeterminate = this.formElement.indeterminate, this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleFocus() {
+    this.showFocusRing = !0;
+  }
+  handleBlur() {
+    this.showFocusRing = !1;
+  }
+};
+e.styles = l(m);
+c([
+  x("input")
+], e.prototype, "formElement", 2);
+c([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "checked", 2);
+c([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "indeterminate", 2);
+c([
+  t({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+c([
+  t({ type: String })
+], e.prototype, "name", 2);
+c([
+  t({ type: String, attribute: "aria-label" })
+], e.prototype, "ariaLabel", 2);
+c([
+  t({ type: String, attribute: "aria-labelledby" })
+], e.prototype, "ariaLabelledBy", 2);
+c([
+  t({ type: String, attribute: "aria-describedby" })
+], e.prototype, "ariaDescribedBy", 2);
+c([
+  p()
+], e.prototype, "showFocusRing", 2);
+e = c([
+  u("c2-checkbox")
+], e);
+export {
+  e as Checkbox
+};

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@c2n/checkbox",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/checkbox.js",
+  "exports": {
+    ".": "./dist/checkbox.js"
+  },
+  "types": "types/src/index.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "checkbox",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
+    "lint:eslint": "eslint 'src/**/*.ts'",
+    "lint:lit-analyzer": "lit-analyzer",
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "@c2n/wc-utils": "0.0.1",
+    "lit": "2.3.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "5.33.1",
+    "@typescript-eslint/parser": "5.33.1",
+    "eslint": "8.22.0",
+    "lit-analyzer": "1.2.1",
+    "prettier": "2.7.1",
+    "typescript": "4.7.4",
+    "vite": "3.0.8"
+  },
+  "prettier": {
+    "singleQuote": true,
+    "printWidth": 160,
+    "tabWidth": 2,
+    "semi": false
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "env": {
+      "browser": true
+    },
+    "rules": {
+      "no-prototype-builtins": "off",
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          "argsIgnorePattern": "^_"
+        }
+      ]
+    },
+    "overrides": [
+      {
+        "files": [
+          "rollup.config.js",
+          "web-test-runner.config.js"
+        ],
+        "env": {
+          "node": true
+        }
+      },
+      {
+        "files": [
+          "*_test.ts",
+          "**/custom_typings/*.ts",
+          "packages/labs/ssr/src/test/integration/tests/**",
+          "packages/labs/ssr/src/lib/util/parse5-utils.ts"
+        ],
+        "rules": {
+          "@typescript-eslint/no-explicit-any": "off"
+        }
+      }
+    ]
+  },
+  "gitHead": "4619709f27a44f40e20b8df23b5ec0fe391b35ac"
+}

package/types/src/checkbox.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export declare class Checkbox extends LitElement {
+    protected formElement: HTMLInputElement;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    name: string;
+    ariaLabel: string;
+    ariaLabelledBy: undefined | string;
+    ariaDescribedBy: undefined | string;
+    protected showFocusRing: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    protected renderCheckBox(): void;
+    protected renderStateLayer(): import("lit-html").TemplateResult<1>;
+    protected handleChange(): void;
+    protected handleFocus(): void;
+    protected handleBlur(): void;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-checkbox': Checkbox;
+    }
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/types/src/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAIjD;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAEZ,OAAO,UAAQ;IAEf,aAAa,UAAQ;IAErB,QAAQ,UAAQ;IAEhC,IAAI,SAAK;IAG5B,SAAS,EAAG,MAAM,CAAA;IAG3B,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAGnC,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,SAAS,CAAC,aAAa,UAAQ;IAE/B,MAAM;IAsCf,SAAS,CAAC,cAAc;IAExB,SAAS,CAAC,gBAAgB;IAI1B,SAAS,CAAC,YAAY;IAWtB,SAAS,CAAC,WAAW;IAIrB,SAAS,CAAC,UAAU;IAIpB,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAA;KACxB;CACF"}

package/types/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './checkbox';
+//# sourceMappingURL=index.d.ts.map

package/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}