@easemate/web-kit 0.1.0

package/build/elements/index.cjs

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = exports.Toggle = exports.Slider = exports.setBooleanAttribute = exports.readControlValue = exports.dispatchControlEvent = exports.coerceNumber = exports.CONTROL_CHANGE_EVENT = exports.RadioOption = exports.RadioInput = exports.RadioGroup = exports.Popover = exports.Origin = exports.NumberInput = exports.MonitorFps = exports.Monitor = exports.Input = exports.Field = exports.Dropdown = exports.ColorPicker = exports.ColorInput = exports.Checkbox = exports.Button = void 0;
+var button_1 = require("./button/index.cjs");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+var checkbox_1 = require("./checkbox/index.cjs");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
+var color_1 = require("./color/index.cjs");
+Object.defineProperty(exports, "ColorInput", { enumerable: true, get: function () { return color_1.ColorInput; } });
+var picker_1 = require("./color/picker.cjs");
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return picker_1.ColorPicker; } });
+var dropdown_1 = require("./dropdown/index.cjs");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
+var field_1 = require("./field/index.cjs");
+Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return field_1.Field; } });
+__exportStar(require("./icons/index.cjs"), exports);
+var input_1 = require("./input/index.cjs");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
+__exportStar(require("./logo/index.cjs"), exports);
+var monitor_1 = require("./monitor/index.cjs");
+Object.defineProperty(exports, "Monitor", { enumerable: true, get: function () { return monitor_1.Monitor; } });
+var fps_1 = require("./monitor/fps.cjs");
+Object.defineProperty(exports, "MonitorFps", { enumerable: true, get: function () { return fps_1.MonitorFps; } });
+var number_1 = require("./number/index.cjs");
+Object.defineProperty(exports, "NumberInput", { enumerable: true, get: function () { return number_1.NumberInput; } });
+var origin_1 = require("./origin/index.cjs");
+Object.defineProperty(exports, "Origin", { enumerable: true, get: function () { return origin_1.Origin; } });
+var popover_1 = require("./popover/index.cjs");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return popover_1.Popover; } });
+var radio_1 = require("./radio/index.cjs");
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return radio_1.RadioGroup; } });
+var input_2 = require("./radio/input.cjs");
+Object.defineProperty(exports, "RadioInput", { enumerable: true, get: function () { return input_2.RadioInput; } });
+var option_1 = require("./radio/option.cjs");
+Object.defineProperty(exports, "RadioOption", { enumerable: true, get: function () { return option_1.RadioOption; } });
+var shared_1 = require("./shared.cjs");
+Object.defineProperty(exports, "CONTROL_CHANGE_EVENT", { enumerable: true, get: function () { return shared_1.CONTROL_CHANGE_EVENT; } });
+Object.defineProperty(exports, "coerceNumber", { enumerable: true, get: function () { return shared_1.coerceNumber; } });
+Object.defineProperty(exports, "dispatchControlEvent", { enumerable: true, get: function () { return shared_1.dispatchControlEvent; } });
+Object.defineProperty(exports, "readControlValue", { enumerable: true, get: function () { return shared_1.readControlValue; } });
+Object.defineProperty(exports, "setBooleanAttribute", { enumerable: true, get: function () { return shared_1.setBooleanAttribute; } });
+var slider_1 = require("./slider/index.cjs");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return slider_1.Slider; } });
+__exportStar(require("./state/index.cjs"), exports);
+var toggle_1 = require("./toggle/index.cjs");
+Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return toggle_1.Toggle; } });
+var tooltip_1 = require("./tooltip/index.cjs");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });

package/build/elements/index.d.cts

@@ -0,0 +1,22 @@
+export { Button } from "./button/index.cjs";
+export { Checkbox } from "./checkbox/index.cjs";
+export { ColorInput } from "./color/index.cjs";
+export { ColorPicker } from "./color/picker.cjs";
+export { Dropdown } from "./dropdown/index.cjs";
+export { Field } from "./field/index.cjs";
+export * from "./icons/index.cjs";
+export { Input } from "./input/index.cjs";
+export * from "./logo/index.cjs";
+export { Monitor } from "./monitor/index.cjs";
+export { MonitorFps } from "./monitor/fps.cjs";
+export { NumberInput } from "./number/index.cjs";
+export { Origin } from "./origin/index.cjs";
+export { type Placement, Popover } from "./popover/index.cjs";
+export { RadioGroup } from "./radio/index.cjs";
+export { RadioInput } from "./radio/input.cjs";
+export { RadioOption } from "./radio/option.cjs";
+export { CONTROL_CHANGE_EVENT, type ControlEventDetail, coerceNumber, dispatchControlEvent, readControlValue, setBooleanAttribute } from "./shared.cjs";
+export { Slider } from "./slider/index.cjs";
+export * from "./state/index.cjs";
+export { Toggle } from "./toggle/index.cjs";
+export { Tooltip } from "./tooltip/index.cjs";

package/build/elements/index.d.ts

@@ -0,0 +1,22 @@
+export { Button } from "./button/index.js";
+export { Checkbox } from "./checkbox/index.js";
+export { ColorInput } from "./color/index.js";
+export { ColorPicker } from "./color/picker.js";
+export { Dropdown } from "./dropdown/index.js";
+export { Field } from "./field/index.js";
+export * from "./icons/index.js";
+export { Input } from "./input/index.js";
+export * from "./logo/index.js";
+export { Monitor } from "./monitor/index.js";
+export { MonitorFps } from "./monitor/fps.js";
+export { NumberInput } from "./number/index.js";
+export { Origin } from "./origin/index.js";
+export { type Placement, Popover } from "./popover/index.js";
+export { RadioGroup } from "./radio/index.js";
+export { RadioInput } from "./radio/input.js";
+export { RadioOption } from "./radio/option.js";
+export { CONTROL_CHANGE_EVENT, type ControlEventDetail, coerceNumber, dispatchControlEvent, readControlValue, setBooleanAttribute } from "./shared.js";
+export { Slider } from "./slider/index.js";
+export * from "./state/index.js";
+export { Toggle } from "./toggle/index.js";
+export { Tooltip } from "./tooltip/index.js";

package/build/elements/index.js

@@ -0,0 +1,22 @@
+export { Button } from "./button/index.js";
+export { Checkbox } from "./checkbox/index.js";
+export { ColorInput } from "./color/index.js";
+export { ColorPicker } from "./color/picker.js";
+export { Dropdown } from "./dropdown/index.js";
+export { Field } from "./field/index.js";
+export * from "./icons/index.js";
+export { Input } from "./input/index.js";
+export * from "./logo/index.js";
+export { Monitor } from "./monitor/index.js";
+export { MonitorFps } from "./monitor/fps.js";
+export { NumberInput } from "./number/index.js";
+export { Origin } from "./origin/index.js";
+export { Popover } from "./popover/index.js";
+export { RadioGroup } from "./radio/index.js";
+export { RadioInput } from "./radio/input.js";
+export { RadioOption } from "./radio/option.js";
+export { CONTROL_CHANGE_EVENT, coerceNumber, dispatchControlEvent, readControlValue, setBooleanAttribute } from "./shared.js";
+export { Slider } from "./slider/index.js";
+export * from "./state/index.js";
+export { Toggle } from "./toggle/index.js";
+export { Tooltip } from "./tooltip/index.js";

package/build/elements/input/index.cjs

@@ -0,0 +1,273 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const lit_html_1 = require("lit-html");
+const shared_1 = require("../shared.cjs");
+const Component_1 = require("~/decorators/Component");
+const Listen_1 = require("~/decorators/Listen");
+const Prop_1 = require("~/decorators/Prop");
+const Query_1 = require("~/decorators/Query");
+@(0, Component_1.Component)({
+    tag: 'ease-input',
+    shadowMode: 'open',
+    autoSlot: true,
+    styles: `
+    :host {
+      display: contents;
+      cursor: text;
+    }
+
+    @keyframes custom-caret {
+      0%,
+      100% {
+        caret-color: transparent;
+      }
+      33.33%,
+      66.66% {
+        caret-color: var(--color-blue-300);
+      }
+    }
+
+    [part="container"] {
+      display: grid;
+      align-items: center;
+      text-align: inherit;
+      width: 100%;
+      min-width: 0;
+      box-sizing: border-box;
+      padding: var(--ease-input-padding, 8px);
+      border-radius: var(--ease-input-radius, var(--radii-md));
+      background-color: var(--ease-input-background, var(--color-gray-875));
+      cursor: text;
+      animation: custom-caret 1s infinite;
+      caret-animation: manual;
+      transition: background-color 0.2s;
+      box-shadow: var(
+        --ease-input-shadow,
+        inset 0 1px 0.25px 0 var(--color-white-4),
+        0 1px 2.5px 0 var(--color-black-8)
+      );
+
+      &:not([data-has-prefix]):not([data-has-suffix]) {
+        padding: var(--ease-input-padding, 8px 12px);
+      }
+
+      &:has(input:disabled) {
+        cursor: not-allowed;
+        opacity: 0.75;
+      }
+
+      &:not(:has(input:disabled)) {
+
+        &:hover {
+          background-color: var(--ease-input-background-hover, var(--color-gray-850));
+        }
+
+        &:has(input:focus-visible) {
+          background-color: var(--ease-input-background-focus, var(--color-gray-825));
+        }
+
+      }
+
+      &[data-has-prefix][data-has-suffix] {
+        padding: var(--ease-input-padding, 0);
+        grid-template-columns: 30px 1fr 30px;
+      }
+
+      &[data-has-prefix]:not([data-has-suffix]) {
+        padding-right: var(--ease-input-padding, 12px);
+        grid-template-columns: 30px 1fr;
+      }
+
+      &[data-has-suffix]:not([data-has-prefix]) {
+        padding-left: var(--ease-input-padding, 12px);
+        grid-template-columns: 1fr 30px;
+      }
+
+      &[data-headless="true"] {
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+        padding: 0;
+        margin: 0;
+        outline: none;
+        border-radius: 0;
+      }
+    }
+
+   ::slotted(button) {
+      --ease-icon-size: 12px;
+      width: 30px;
+      height: 30px;
+      appearance: none;
+      border: none;
+      outline: none;
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+      line-height: 14px;
+      transition: color 0.2s;
+      cursor: pointer;
+      display: grid;
+      place-items: center;
+      color: var(--color-gray-600);
+      transition: color 0.2s;
+
+      &:hover,
+      &:focus-visible {
+        color: var(--color-blue-100);
+      }
+
+      &.isActive {
+        animation: blink .6s forwards;
+      }
+
+      @keyframes blink {
+        50% {
+          background-color: var(--color-white-8);
+        }
+      }
+    }
+
+    ::slotted(button[slot="prefix"]) {
+      border-radius: var(--radii-md) 0 0 var(--radii-md);
+      border-right: 1px solid var(--color-white-4);
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    ::slotted([slot="prefix"]:not(button)) {
+      margin: calc(var(--ease-input-padding, 8px) * -1);
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    ::slotted(button[slot="suffix"]) {
+      border-radius: 0 var(--radii-md) var(--radii-md) 0;
+      border-left: 1px solid var(--color-white-4);
+
+      &:empty {
+        display: none;
+      }
+    }
+
+    input {
+      font-family: inherit;
+      font-optical-sizing: auto;
+      font-size: var(--ease-input-font-size, var(--ease-font-size, 13px));
+      appearance: none;
+      -moz-appearance: textfield;
+      font-weight: var(--ease-input-font-weight, 500);
+      color: var(--ease-input-color, var(--color-blue-100));
+      min-width: 0;
+      cursor: inherit;
+      text-align: inherit;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+      outline: none;
+      margin: 0;
+      line-height: var(--ease-input-line-height, 14px);
+      transition: color 0.2s;
+
+      &::placeholder {
+        color: var(--ease-input-placeholder-color, var(--color-gray-600));
+        opacity: 1;
+      }
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <div part="container" data-headless=${Boolean(this.headless)}>
+        <slot name="prefix" part="prefix"></slot>
+        <input part="control" .disabled=${Boolean(this.disabled)} ?disabled=${Boolean(this.disabled)} ?aria-disabled=${Boolean(this.disabled)} />
+        
+        <slot name="suffix" part="suffix"></slot>
+      </div>
+    `;
+    }
+})
+class Input extends HTMLElement {
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor value;
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor placeholder;
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'text' })
+    accessor type;
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor name;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true, defaultValue: false })
+    accessor disabled = false;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true, defaultValue: false })
+    accessor headless = false;
+    @(0, Query_1.Query)('input')
+    accessor control;
+    updatePrefixAttribute() {
+        const container = this.shadowRoot?.querySelector('[part="container"]');
+        if (!container) {
+            return;
+        }
+        const prefixSlot = this.shadowRoot?.querySelector('slot[name="prefix"]');
+        const hasPrefix = Boolean(prefixSlot?.assignedNodes({ flatten: true }).length > 0);
+        (0, shared_1.setBooleanAttribute)(container, 'data-has-prefix', hasPrefix);
+    }
+    updateSuffixAttribute() {
+        const container = this.shadowRoot?.querySelector('[part="container"]');
+        if (!container) {
+            return;
+        }
+        const suffixSlot = this.shadowRoot?.querySelector('slot[name="suffix"]');
+        const hasSuffix = Boolean(suffixSlot?.assignedNodes({ flatten: true }).length > 0);
+        (0, shared_1.setBooleanAttribute)(container, 'data-has-suffix', hasSuffix);
+    }
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const control = this.control;
+        const value = this.value ?? '';
+        if (control.value !== value) {
+            control.value = value;
+        }
+        control.type = this.type ?? 'text';
+        control.placeholder = this.placeholder ?? '';
+        control.name = this.name ?? '';
+        control.disabled = Boolean(this.disabled);
+        this.updatePrefixAttribute();
+        this.updateSuffixAttribute();
+        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
+    }
+    @(0, Listen_1.Listen)('slotchange', { selector: 'slot[name="prefix"]' })
+    onPrefixSlotChange() {
+        this.updatePrefixAttribute();
+    }
+    @(0, Listen_1.Listen)('slotchange', { selector: 'slot[name="suffix"]' })
+    onSuffixSlotChange() {
+        this.updateSuffixAttribute();
+    }
+    @(0, Listen_1.Listen)('input', { selector: 'input' })
+    handleInput(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = target.value;
+        (0, shared_1.dispatchControlEvent)(this, 'input', { value: this.value ?? '', event });
+    }
+    @(0, Listen_1.Listen)('change', { selector: 'input' })
+    handleChange(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = target.value;
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value ?? '', event });
+    }
+}
+exports.Input = Input;

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

@@ -0,0 +1,17 @@
+export declare class Input extends HTMLElement {
+    requestRender: () => void;
+    accessor value: string | null;
+    accessor placeholder: string | null;
+    accessor type: string;
+    accessor name: string | null;
+    accessor disabled: boolean;
+    accessor headless: boolean;
+    accessor control: HTMLInputElement | null;
+    private updatePrefixAttribute;
+    private updateSuffixAttribute;
+    afterRender(): void;
+    onPrefixSlotChange(): void;
+    onSuffixSlotChange(): void;
+    handleInput(event: Event, target?: HTMLInputElement | null): void;
+    handleChange(event: Event, target?: HTMLInputElement | null): void;
+}

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

@@ -0,0 +1,17 @@
+export declare class Input extends HTMLElement {
+    requestRender: () => void;
+    accessor value: string | null;
+    accessor placeholder: string | null;
+    accessor type: string;
+    accessor name: string | null;
+    accessor disabled: boolean;
+    accessor headless: boolean;
+    accessor control: HTMLInputElement | null;
+    private updatePrefixAttribute;
+    private updateSuffixAttribute;
+    afterRender(): void;
+    onPrefixSlotChange(): void;
+    onSuffixSlotChange(): void;
+    handleInput(event: Event, target?: HTMLInputElement | null): void;
+    handleChange(event: Event, target?: HTMLInputElement | null): void;
+}