@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/checkbox/index.js

@@ -1,312 +0,0 @@
-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

@@ -1,154 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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;
-        }
-    };
-}