@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/icons/interface/settings.js

@@ -1,26 +0,0 @@
-import { html } from 'lit-html';
-import { Component } from '../../../decorators/Component';
-@Component({
-    tag: 'ease-icon-settings',
-    styles: `
-    :host {
-      display: block;
-      width: 16px;
-      height: 16px;
-      fill: none;
-      stroke: currentColor;
-      stroke-width: 1.5;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-  `,
-    template() {
-        return html `
-      <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M2 5.33319L10 5.33319M10 5.33319C10 6.43776 10.8954 7.33319 12 7.33319C13.1046 7.33319 14 6.43776 14 5.33319C14 4.22862 13.1046 3.33319 12 3.33319C10.8954 3.33319 10 4.22862 10 5.33319ZM6 10.6665L14 10.6665M6 10.6665C6 11.7711 5.10457 12.6665 4 12.6665C2.89543 12.6665 2 11.7711 2 10.6665C2 9.56195 2.89543 8.66652 4 8.66652C5.10457 8.66652 6 9.56195 6 10.6665Z" />
-      </svg>
-    `;
-    }
-})
-export class Settings extends HTMLElement {
-}

package/build/elements/index.cjs

@@ -1,65 +0,0 @@
-"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.State = exports.Slider = exports.setBooleanAttribute = exports.readControlValue = exports.dispatchControlEvent = exports.coerceNumber = exports.CONTROL_CHANGE_EVENT = exports.RadioOption = exports.RadioInput = exports.RadioGroup = exports.Popover = exports.Panel = 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 panel_1 = require("./panel/index.cjs");
-Object.defineProperty(exports, "Panel", { enumerable: true, get: function () { return panel_1.Panel; } });
-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; } });
-var state_1 = require("./state/index.cjs");
-Object.defineProperty(exports, "State", { enumerable: true, get: function () { return state_1.State; } });
-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

@@ -1,23 +0,0 @@
-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 { Panel, type TabChangeEventDetail } from "./panel/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 { State, type StateChangeEventDetail } from "./state/index.cjs";
-export { Toggle } from "./toggle/index.cjs";
-export { Tooltip } from "./tooltip/index.cjs";

package/build/elements/index.d.ts

@@ -1,23 +0,0 @@
-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 { Panel, type TabChangeEventDetail } from "./panel/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 { State, type StateChangeEventDetail } from "./state/index.js";
-export { Toggle } from "./toggle/index.js";
-export { Tooltip } from "./tooltip/index.js";

package/build/elements/index.js

@@ -1,23 +0,0 @@
-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 { Panel } from "./panel/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 { State } from "./state/index.js";
-export { Toggle } from "./toggle/index.js";
-export { Tooltip } from "./tooltip/index.js";

package/build/elements/input/index.cjs

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

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

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