@easemate/web-kit 0.1.0

package/build/elements/checkbox/index.js

@@ -0,0 +1,312 @@
+import { html } from 'lit-html';
+import { dispatchControlEvent, setBooleanAttribute } from "../shared.js";
+import { Component } from '~/decorators/Component';
+import { Listen } from '~/decorators/Listen';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+@Component({
+    tag: 'ease-checkbox',
+    styles: `
+    .checkbox {
+      display: table;
+      border-radius: var(--ease-checkbox-radius, 5px);
+      position: relative;
+
+      svg {
+        display: block;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        pointer-events: none;
+        fill: var(--ease-checkbox-check-color, var(--color-blue-100));
+        transform: scale(1.01) translateZ(0);
+
+        .tick {
+          fill: none;
+          stroke-width: 3px;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          stroke: var(--ease-checkbox-check-color, var(--color-blue-100));
+          transform-origin: 10.5px 16px;
+          transform: scale(1) translateZ(0);
+        }
+
+        .dot {
+          transform-origin: 10.5px 15.5px;
+          transform: scale(1) translateZ(0);
+          transform-box: fill-box;
+        }
+
+         .drop {
+          transform-origin: 25px -1px;
+          transform: scale(1) translateZ(0);
+          opacity: 0;
+        }
+      }
+    }
+
+    [part="checkbox"] {
+      display: table;
+      margin: 0;
+      padding: 0;
+      appearance: none;
+      cursor: pointer;
+      background: none;
+      border: none;
+      outline: none;
+    }
+
+    [part="control"] {
+      appearance: none;
+      outline: none;
+      border: none;
+      background: none;
+      display: block;
+      cursor: pointer;
+      margin: 0;
+      padding: 0;
+      border-radius: inherit;
+      width: var(--ease-checkbox-size, 24px);
+      height: var(--ease-checkbox-size, 24px);
+    }
+
+    [part="control"] {
+      box-shadow: inset 0 0 0 var(--ease-checkbox-border-width, 2px) var(--ease-checkbox-border-color, var(--color-gray-700));
+    }
+
+    .tick {
+      stroke-dasharray: 16px 33px;
+      stroke-dashoffset: 20.5px;
+    }
+
+    .dot {
+      transform: translate(14px, -14px) scale(1) translateZ(0);
+      opacity: 0;
+    }
+
+    [part="control"]:checked {
+      box-shadow: inset 0 0 0 var(--ease-checkbox-checked-fill-size, 12px) var(--ease-checkbox-checked-fill, var(--color-blue-800));
+    }
+
+    [part="control"]:checked + svg .tick {
+      stroke-dasharray: 16.5px 33px;
+      stroke-dashoffset: 46.5px;
+    }
+
+    [part="control"]:checked + svg .dot {
+      transform: translate(0px, 0px) scale(1) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="checkbox"] [part="control"].anim-checked {
+      animation: checkbox-border-fill 0.2s ease-out forwards, checkbox-morph 0.5s ease-out forwards;
+    }
+
+    [part="checkbox"] [part="control"].anim-checked + svg {
+      .tick {
+        animation: checkbox-tick 0.65s ease-out forwards;
+      }
+
+      .dot {
+        animation: checkbox-dot-move 0.6s ease-out forwards;
+      }
+    }
+
+    [part="checkbox"] [part="control"].anim-unchecked {
+      animation: checkbox-border-default 0.4s ease-out forwards;
+    }
+
+    [part="checkbox"] [part="control"].anim-unchecked + svg {
+      .tick {
+        animation: checkbox-tick-default 0.2s ease-out forwards;
+      }
+      .dot {
+        animation: checkbox-dot-hide 0.2s ease-out forwards;
+      }
+    }
+      
+    @keyframes checkbox-border-fill {
+      0% {
+        box-shadow: inset 0 0 0 var(--ease-checkbox-border-width, 2px) var(--ease-checkbox-border-color, var(--color-gray-700));
+      }
+        100% {
+            box-shadow: inset 0 0 0 var(--ease-checkbox-checked-fill-size, 12px) var(--ease-checkbox-checked-fill, var(--color-blue-800));
+        }
+    }
+
+    @keyframes checkbox-morph {
+      0%, 40% {
+        border-radius: 5px 14px 5px 5px;
+      }
+      100% {
+        border-radius: 5px;
+      }
+    }
+
+    @keyframes checkbox-tick {
+        0% {
+            stroke-dasharray: 16px 33px;
+            stroke-dashoffset: 20.5px;
+        }
+        47% {
+            stroke-dasharray: 14px 33px;
+            stroke-dashoffset: 48px;
+        }
+        100% {
+            stroke-dasharray: 16.5px 33px;
+            stroke-dashoffset: 46.5px;
+        }
+    }
+
+    @keyframes checkbox-dot-move {
+        0%, 40% {
+            transform: translate(14px, -14px) scale(1) translateZ(0);
+            opacity: 0;
+        }
+        100% {
+            transform: translate(0px, 0px) scale(1) translateZ(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes checkbox-dot-hide {
+        0% {
+            transform: translate(0px, 0px) scale(1) translateZ(0);
+            opacity: 1;
+        }
+        100% {
+            transform: translate(14px, -14px) scale(1) translateZ(0);
+            opacity: 0;
+        }
+    }
+
+    @keyframes checkbox-border-default {
+        0%,
+        40% {
+            box-shadow: inset 0 0 0 var(--ease-checkbox-checked-fill-size, 12px) var(--ease-checkbox-checked-fill, var(--color-blue-800));
+        }
+        100% {
+            box-shadow: inset 0 0 0 var(--ease-checkbox-border-width, 2px) var(--ease-checkbox-border-color, var(--color-gray-700));
+        }
+    }
+
+    @keyframes checkbox-tick-default {
+        0% {
+            stroke-dasharray: 16.5px 33px;
+            stroke-dashoffset: 46.5px;
+        }
+        100% {
+            stroke-dasharray: 16px 33px;
+            stroke-dashoffset: 20.5px;
+        }
+    }
+  `,
+    template() {
+        return html `
+      <button
+        part="checkbox"
+        type="button"
+        role="checkbox"
+        aria-checked=${this.checked}
+        ?disabled=${this.disabled}
+      >
+        <div class="checkbox">
+          <input
+            part="control"
+            name=${this.name}
+            value=${this.value}
+            ?checked=${this.checked}
+            ?disabled=${this.disabled}
+            type="checkbox"
+          />
+          <svg viewBox="0 0 24 24" filter="url(#${this.filterId})">
+            <path class="tick" d="M4.5 10L10.5 16L24.5 1" />
+            <circle class="dot" cx="10.5" cy="15.5" r="1.5" />
+            <circle class="drop" cx="25" cy="-1" r="2" />
+          </svg>
+        </div>
+
+        <svg style="display: none;">
+          <defs>
+            <filter id="${this.filterId}">
+              <feGaussianBlur
+                in="SourceGraphic"
+                stdDeviation="1.25"
+                result="blur"
+              />
+              <feColorMatrix
+                in="blur"
+                mode="matrix"
+                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"
+                result="gooey"
+              />
+              <feBlend in="SourceGraphic" in2="gooey" />
+            </filter>
+          </defs>
+        </svg>
+      </button>
+    `;
+    }
+})
+export class Checkbox extends HTMLElement {
+    @Prop({ type: Boolean, reflect: true })
+    accessor checked;
+    @Prop({ reflect: true })
+    accessor name;
+    @Prop({ reflect: true })
+    accessor value;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled;
+    @Query('button')
+    accessor control;
+    _prevChecked;
+    filterId = `goo-${crypto.randomUUID()}`;
+    connectedCallback() {
+        this._prevChecked = this.checked;
+    }
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const changed = typeof this._prevChecked !== 'undefined' && this.checked !== this._prevChecked;
+        if (changed) {
+            this._triggerAnimation(this.checked);
+            this._prevChecked = this.checked;
+        }
+        const control = this.control;
+        control.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        control.disabled = Boolean(this.disabled);
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+    }
+    _triggerAnimation(checked) {
+        const control = this.shadowRoot?.querySelector('[part="control"]');
+        const svg = this.shadowRoot?.querySelector('svg');
+        if (!control || !svg) {
+            return;
+        }
+        control.classList.remove('anim-checked', 'anim-unchecked');
+        svg.classList.remove('anim-checked', 'anim-unchecked');
+        const animClass = checked ? 'anim-checked' : 'anim-unchecked';
+        const duration = checked ? 650 : 400;
+        control.classList.add(animClass);
+        svg.classList.add(animClass);
+        setTimeout(() => {
+            control.classList.remove(animClass);
+            svg.classList.remove(animClass);
+        }, duration);
+    }
+    @Listen('click', {
+        selector: 'button'
+    })
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.checked = !this.checked;
+        dispatchControlEvent(this, 'checkbox', { value: this.checked, event });
+    }
+}

package/build/elements/color/index.cjs

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorInput = void 0;
+const lit_html_1 = require("lit-html");
+const shared_1 = require("../shared.cjs");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+const Query_1 = require("~/decorators/Query");
+require("../dropdown/index.cjs");
+require("../input/index.cjs");
+require("./picker.cjs");
+const utils_1 = require("./utils.cjs");
+const template_helpers_1 = require("~/utils/template-helpers");
+@(0, Component_1.Component)({
+    tag: 'ease-color-input',
+    styles: `
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    ease-dropdown {
+      --ease-dropdown-panel-min-width: auto;
+      --ease-dropdown-panel-width: max-content;
+      --ease-dropdown-panel-max-width: max-content;
+    }
+
+    :host(:not([custom-trigger])) ease-input {
+      --ease-input-padding: 0 4px 0 4px;
+      display: block;
+      width: 76px;
+      cursor: pointer;
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+
+      &::part(control) {
+        margin-left: -12px;
+        cursor: pointer;
+      }
+    }
+
+    ease-dropdown::part(trigger):disabled {
+      cursor: default;
+      opacity: 0.75;
+    }
+
+    :host(:not([custom-trigger])) [slot="prefix"] {
+      display: block;
+      width: 14px;
+      height: 14px;
+      margin-left: -4px;
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 1px var(--color-white-10);
+    }
+
+    [part="value-text"] {
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+    }
+
+    ease-dropdown::part(content) {
+      padding: var(--ease-color-input-dropdown-padding, 12px 12px 8px 12px);
+      overflow: visible;
+    }
+
+    ::slotted([slot="trigger"]) {
+      cursor: pointer;
+    }
+  `
+})
+class ColorInput extends HTMLElement {
+    #hasCustomTrigger = false;
+    @(0, Query_1.Query)('ease-dropdown')
+    accessor dropdown;
+    @(0, Prop_1.Prop)({
+        reflect: true,
+        defaultValue: '#FF0000',
+        onChange(next) {
+            if (next && (0, utils_1.isValidHex)(next)) {
+                const normalized = next.toUpperCase();
+                if (this.value !== normalized) {
+                    this.value = normalized;
+                }
+            }
+            else if (!next) {
+                this.value = '#000000';
+            }
+        }
+    })
+    accessor value;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor disabled = false;
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'bottom-start' })
+    accessor placement = 'bottom-start';
+    connectedCallback() {
+        this.#hasCustomTrigger = this.querySelector('[slot="trigger"]') !== null;
+        (0, shared_1.setBooleanAttribute)(this, 'custom-trigger', this.#hasCustomTrigger);
+    }
+    afterRender() {
+        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
+    }
+    #renderDefaultTrigger() {
+        const swatchStyle = {
+            backgroundColor: this.value
+        };
+        return (0, lit_html_1.html) `
+      <div slot="trigger" part="trigger-content">
+        <ease-input part="input" type="text" .value=${this.value} @change=${this.#handleInputChange} headless>
+          <div slot="prefix" style=${(0, template_helpers_1.styleMap)(swatchStyle)}></div>
+        </ease-input>
+      </div>
+    `;
+    }
+    render() {
+        return (0, lit_html_1.html) `
+      <ease-dropdown .disabled=${this.disabled} .placement=${this.placement}>
+        ${this.#hasCustomTrigger ? (0, lit_html_1.html) `<slot name="trigger" slot="trigger"></slot>` : this.#renderDefaultTrigger()}
+        <ease-color-picker slot="content"
+          data-select-ignore
+          .value=${this.value}
+          @input=${this.#handlePickerInput}
+          @change=${this.#handlePickerChange}
+          @cancel=${this.#handlePickerCancel}
+          @apply=${this.#handlePickerApply}
+        ></ease-color-picker>
+      </ease-dropdown>
+    `;
+    }
+    #handleInputChange = (event) => {
+        this.value = event.target.value;
+        (0, shared_1.dispatchControlEvent)(this, 'input', { value: this.value, event });
+    };
+    #handlePickerInput = (event) => {
+        this.value = event.detail.value;
+        (0, shared_1.dispatchControlEvent)(this, 'input', { value: this.value, event });
+    };
+    #handlePickerChange = (event) => {
+        this.value = event.detail.value;
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event });
+    };
+    #handlePickerCancel = (event) => {
+        this.value = event.detail.value;
+        this.requestRender();
+        if (this.dropdown) {
+            this.dropdown.open = false;
+        }
+    };
+    #handlePickerApply = (event) => {
+        this.value = event.detail.value;
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event });
+        if (this.dropdown) {
+            this.dropdown.open = false;
+        }
+    };
+}
+exports.ColorInput = ColorInput;

package/build/elements/color/index.d.cts

@@ -0,0 +1,18 @@
+import type { Placement } from '~/elements/popover';
+import { type TemplateResult } from 'lit-html';
+import "../dropdown/index.cjs";
+import "../input/index.cjs";
+import "./picker.cjs";
+export declare class ColorInput extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor dropdown: (HTMLElement & {
+        open: boolean;
+    }) | null;
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor placement: Placement;
+    connectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+}

package/build/elements/color/index.d.ts

@@ -0,0 +1,18 @@
+import type { Placement } from '~/elements/popover';
+import { type TemplateResult } from 'lit-html';
+import "../dropdown/index.js";
+import "../input/index.js";
+import "./picker.js";
+export declare class ColorInput extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor dropdown: (HTMLElement & {
+        open: boolean;
+    }) | null;
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor placement: Placement;
+    connectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+}

package/build/elements/color/index.js

@@ -0,0 +1,150 @@
+import { html } from 'lit-html';
+import { dispatchControlEvent, setBooleanAttribute } from "../shared.js";
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+import "../dropdown/index.js";
+import "../input/index.js";
+import "./picker.js";
+import { isValidHex } from "./utils.js";
+import { styleMap } from '~/utils/template-helpers';
+@Component({
+    tag: 'ease-color-input',
+    styles: `
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    ease-dropdown {
+      --ease-dropdown-panel-min-width: auto;
+      --ease-dropdown-panel-width: max-content;
+      --ease-dropdown-panel-max-width: max-content;
+    }
+
+    :host(:not([custom-trigger])) ease-input {
+      --ease-input-padding: 0 4px 0 4px;
+      display: block;
+      width: 76px;
+      cursor: pointer;
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+
+      &::part(control) {
+        margin-left: -12px;
+        cursor: pointer;
+      }
+    }
+
+    ease-dropdown::part(trigger):disabled {
+      cursor: default;
+      opacity: 0.75;
+    }
+
+    :host(:not([custom-trigger])) [slot="prefix"] {
+      display: block;
+      width: 14px;
+      height: 14px;
+      margin-left: -4px;
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 1px var(--color-white-10);
+    }
+
+    [part="value-text"] {
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+    }
+
+    ease-dropdown::part(content) {
+      padding: var(--ease-color-input-dropdown-padding, 12px 12px 8px 12px);
+      overflow: visible;
+    }
+
+    ::slotted([slot="trigger"]) {
+      cursor: pointer;
+    }
+  `
+})
+export class ColorInput extends HTMLElement {
+    #hasCustomTrigger = false;
+    @Query('ease-dropdown')
+    accessor dropdown;
+    @Prop({
+        reflect: true,
+        defaultValue: '#FF0000',
+        onChange(next) {
+            if (next && isValidHex(next)) {
+                const normalized = next.toUpperCase();
+                if (this.value !== normalized) {
+                    this.value = normalized;
+                }
+            }
+            else if (!next) {
+                this.value = '#000000';
+            }
+        }
+    })
+    accessor value;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled = false;
+    @Prop({ reflect: true, defaultValue: 'bottom-start' })
+    accessor placement = 'bottom-start';
+    connectedCallback() {
+        this.#hasCustomTrigger = this.querySelector('[slot="trigger"]') !== null;
+        setBooleanAttribute(this, 'custom-trigger', this.#hasCustomTrigger);
+    }
+    afterRender() {
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+    }
+    #renderDefaultTrigger() {
+        const swatchStyle = {
+            backgroundColor: this.value
+        };
+        return html `
+      <div slot="trigger" part="trigger-content">
+        <ease-input part="input" type="text" .value=${this.value} @change=${this.#handleInputChange} headless>
+          <div slot="prefix" style=${styleMap(swatchStyle)}></div>
+        </ease-input>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <ease-dropdown .disabled=${this.disabled} .placement=${this.placement}>
+        ${this.#hasCustomTrigger ? html `<slot name="trigger" slot="trigger"></slot>` : this.#renderDefaultTrigger()}
+        <ease-color-picker slot="content"
+          data-select-ignore
+          .value=${this.value}
+          @input=${this.#handlePickerInput}
+          @change=${this.#handlePickerChange}
+          @cancel=${this.#handlePickerCancel}
+          @apply=${this.#handlePickerApply}
+        ></ease-color-picker>
+      </ease-dropdown>
+    `;
+    }
+    #handleInputChange = (event) => {
+        this.value = event.target.value;
+        dispatchControlEvent(this, 'input', { value: this.value, event });
+    };
+    #handlePickerInput = (event) => {
+        this.value = event.detail.value;
+        dispatchControlEvent(this, 'input', { value: this.value, event });
+    };
+    #handlePickerChange = (event) => {
+        this.value = event.detail.value;
+        dispatchControlEvent(this, 'change', { value: this.value, event });
+    };
+    #handlePickerCancel = (event) => {
+        this.value = event.detail.value;
+        this.requestRender();
+        if (this.dropdown) {
+            this.dropdown.open = false;
+        }
+    };
+    #handlePickerApply = (event) => {
+        this.value = event.detail.value;
+        dispatchControlEvent(this, 'change', { value: this.value, event });
+        if (this.dropdown) {
+            this.dropdown.open = false;
+        }
+    };
+}