@easemate/web-kit 0.1.0

package/build/elements/number/index.cjs

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NumberInput = 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");
+require("../input/index.cjs");
+require("../icons/interface/minus.cjs");
+require("../icons/interface/plus.cjs");
+@(0, Component_1.Component)({
+    tag: 'ease-number-input',
+    styles: `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    [part="container"] {
+      min-width: 0;
+    }
+
+    ease-input {
+      --ease-input-padding: 0;
+      text-align: center;
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+      font-variant-numeric: tabular-nums;
+      font-feature-settings: "tnum";
+    }
+
+    [part="button"] {
+      position: relative;
+      overflow: hidden;
+      
+      & > div {
+        animation: blink .75s forwards;
+        position: absolute;
+        pointer-events: none;
+        inset: 0;
+        background-color: var(--ease-number-blink-color, var(--color-white-8));
+      }
+    }
+
+    @keyframes blink {
+      0%,
+      90%,
+      100% {
+        opacity: 0;
+      }
+      30% {
+        opacity: 1;
+      }
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <div part="container">
+        <ease-input
+          part="control"
+          type="number"
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          ?min=${this.min}
+          ?max=${this.max}
+          ?step=${this.step}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        >
+          <button
+            slot="prefix"
+            @click=${this.handleDecrement.bind(this)}
+            type="button"
+            part="button"
+            ?disabled=${this.disabled || this.min === null || Number(this.control?.value) <= this.min}
+            ?aria-disabled=${this.disabled || this.min === null || Number(this.control?.value) <= this.min}
+          >
+            <ease-icon-minus />
+          </button>
+          <button
+            slot="suffix"
+            @click=${this.handleIncrement.bind(this)}
+            type="button"
+            part="button"
+            ?disabled=${this.disabled || this.max === null || Number(this.control?.value) >= this.max}
+            ?aria-disabled=${this.disabled || this.max === null || Number(this.control?.value) >= this.max}
+          >
+            <ease-icon-plus />
+          </button>
+        </ease-input>
+      </div>
+    `;
+    }
+})
+class NumberInput extends HTMLElement {
+    @(0, Prop_1.Prop)({ type: Number, reflect: true })
+    accessor value;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true })
+    accessor min;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true })
+    accessor max;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true })
+    accessor step;
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor name;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor disabled;
+    @(0, Query_1.Query)('input')
+    accessor control;
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const control = this.control;
+        control.value = this.value === null || this.value === undefined ? '' : String(this.value);
+        control.min = this.min === null || this.min === undefined ? '' : String(this.min);
+        control.max = this.max === null || this.max === undefined ? '' : String(this.max);
+        control.step = this.step === null || this.step === undefined ? '' : String(this.step);
+        control.name = this.name ?? '';
+        control.disabled = Boolean(this.disabled);
+        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
+    }
+    @(0, Listen_1.Listen)('input', { selector: 'input' })
+    handleInput(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = (0, shared_1.coerceNumber)(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 = (0, shared_1.coerceNumber)(target.value);
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event });
+    }
+    addActiveLayer(button) {
+        const layer = document.createElement('div');
+        layer.classList.add('active-layer');
+        button.appendChild(layer);
+        setTimeout(() => {
+            layer.remove();
+        }, 600);
+    }
+    handleDecrement(event) {
+        if (this.disabled || this.min === null || Number(this.control?.value) <= this.min) {
+            return;
+        }
+        const button = event.currentTarget;
+        this.addActiveLayer(button);
+        const current = typeof this.value === 'number' ? this.value : 0;
+        this.value = current - (this.step ?? 1);
+        if (this.value <= this.min) {
+            this.disabled = true;
+        }
+    }
+    handleIncrement(event) {
+        if (this.disabled || this.max === null || Number(this.control?.value) >= this.max) {
+            return;
+        }
+        const button = event.currentTarget;
+        this.addActiveLayer(button);
+        const current = typeof this.value === 'number' ? this.value : 0;
+        this.value = current + (this.step ?? 1);
+        if (this.value >= this.max) {
+            this.disabled = true;
+        }
+    }
+}
+exports.NumberInput = NumberInput;

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

@@ -0,0 +1,19 @@
+import "../input/index.cjs";
+import "../icons/interface/minus.cjs";
+import "../icons/interface/plus.cjs";
+export declare class NumberInput extends HTMLElement {
+    requestRender: () => void;
+    accessor value: number | null;
+    accessor min: number | null;
+    accessor max: number | null;
+    accessor step: number | null;
+    accessor name: string | null;
+    accessor disabled: boolean;
+    accessor control: HTMLInputElement | null;
+    afterRender(): void;
+    handleInput(event: Event, target?: HTMLInputElement | null): void;
+    handleChange(event: Event, target?: HTMLInputElement | null): void;
+    addActiveLayer(button: HTMLButtonElement): void;
+    handleDecrement(event: MouseEvent): void;
+    handleIncrement(event: MouseEvent): void;
+}

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

@@ -0,0 +1,19 @@
+import "../input/index.js";
+import "../icons/interface/minus.js";
+import "../icons/interface/plus.js";
+export declare class NumberInput extends HTMLElement {
+    requestRender: () => void;
+    accessor value: number | null;
+    accessor min: number | null;
+    accessor max: number | null;
+    accessor step: number | null;
+    accessor name: string | null;
+    accessor disabled: boolean;
+    accessor control: HTMLInputElement | null;
+    afterRender(): void;
+    handleInput(event: Event, target?: HTMLInputElement | null): void;
+    handleChange(event: Event, target?: HTMLInputElement | null): void;
+    addActiveLayer(button: HTMLButtonElement): void;
+    handleDecrement(event: MouseEvent): void;
+    handleIncrement(event: MouseEvent): void;
+}

package/build/elements/number/index.js

@@ -0,0 +1,169 @@
+import { html } from 'lit-html';
+import { coerceNumber, 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';
+import "../input/index.js";
+import "../icons/interface/minus.js";
+import "../icons/interface/plus.js";
+@Component({
+    tag: 'ease-number-input',
+    styles: `
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    [part="container"] {
+      min-width: 0;
+    }
+
+    ease-input {
+      --ease-input-padding: 0;
+      text-align: center;
+      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
+      font-variant-numeric: tabular-nums;
+      font-feature-settings: "tnum";
+    }
+
+    [part="button"] {
+      position: relative;
+      overflow: hidden;
+      
+      & > div {
+        animation: blink .75s forwards;
+        position: absolute;
+        pointer-events: none;
+        inset: 0;
+        background-color: var(--ease-number-blink-color, var(--color-white-8));
+      }
+    }
+
+    @keyframes blink {
+      0%,
+      90%,
+      100% {
+        opacity: 0;
+      }
+      30% {
+        opacity: 1;
+      }
+    }
+  `,
+    template() {
+        return html `
+      <div part="container">
+        <ease-input
+          part="control"
+          type="number"
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          ?min=${this.min}
+          ?max=${this.max}
+          ?step=${this.step}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        >
+          <button
+            slot="prefix"
+            @click=${this.handleDecrement.bind(this)}
+            type="button"
+            part="button"
+            ?disabled=${this.disabled || this.min === null || Number(this.control?.value) <= this.min}
+            ?aria-disabled=${this.disabled || this.min === null || Number(this.control?.value) <= this.min}
+          >
+            <ease-icon-minus />
+          </button>
+          <button
+            slot="suffix"
+            @click=${this.handleIncrement.bind(this)}
+            type="button"
+            part="button"
+            ?disabled=${this.disabled || this.max === null || Number(this.control?.value) >= this.max}
+            ?aria-disabled=${this.disabled || this.max === null || Number(this.control?.value) >= this.max}
+          >
+            <ease-icon-plus />
+          </button>
+        </ease-input>
+      </div>
+    `;
+    }
+})
+export class NumberInput extends HTMLElement {
+    @Prop({ type: Number, reflect: true })
+    accessor value;
+    @Prop({ type: Number, reflect: true })
+    accessor min;
+    @Prop({ type: Number, reflect: true })
+    accessor max;
+    @Prop({ type: Number, reflect: true })
+    accessor step;
+    @Prop({ reflect: true })
+    accessor name;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled;
+    @Query('input')
+    accessor control;
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const control = this.control;
+        control.value = this.value === null || this.value === undefined ? '' : String(this.value);
+        control.min = this.min === null || this.min === undefined ? '' : String(this.min);
+        control.max = this.max === null || this.max === undefined ? '' : String(this.max);
+        control.step = this.step === null || this.step === undefined ? '' : String(this.step);
+        control.name = this.name ?? '';
+        control.disabled = Boolean(this.disabled);
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+    }
+    @Listen('input', { selector: 'input' })
+    handleInput(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = coerceNumber(target.value);
+        dispatchControlEvent(this, 'input', { value: this.value, event });
+    }
+    @Listen('change', { selector: 'input' })
+    handleChange(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = coerceNumber(target.value);
+        dispatchControlEvent(this, 'change', { value: this.value, event });
+    }
+    addActiveLayer(button) {
+        const layer = document.createElement('div');
+        layer.classList.add('active-layer');
+        button.appendChild(layer);
+        setTimeout(() => {
+            layer.remove();
+        }, 600);
+    }
+    handleDecrement(event) {
+        if (this.disabled || this.min === null || Number(this.control?.value) <= this.min) {
+            return;
+        }
+        const button = event.currentTarget;
+        this.addActiveLayer(button);
+        const current = typeof this.value === 'number' ? this.value : 0;
+        this.value = current - (this.step ?? 1);
+        if (this.value <= this.min) {
+            this.disabled = true;
+        }
+    }
+    handleIncrement(event) {
+        if (this.disabled || this.max === null || Number(this.control?.value) >= this.max) {
+            return;
+        }
+        const button = event.currentTarget;
+        this.addActiveLayer(button);
+        const current = typeof this.value === 'number' ? this.value : 0;
+        this.value = current + (this.step ?? 1);
+        if (this.value >= this.max) {
+            this.disabled = true;
+        }
+    }
+}

package/build/elements/origin/index.cjs

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Origin = void 0;
+require("../dropdown/index.cjs");
+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-origin',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="container"] {
+      flex: 1;
+      width: 100%;
+      display: grid;
+      grid-template-columns: 30px auto;
+      grid-gap: 8px;
+    }
+
+    [part="preview"] {
+      width: 30px;
+      height: 30px;
+      border-radius: var(--radii-md);
+      background-color: var(--color-gray-875);
+      cursor: pointer;
+      box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
+      border-radius: var(--radii-md);
+      position: relative;
+
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        width: 3px;
+        height: 3px;
+        background-color: var(--color-blue-100);
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -1.5px;
+        margin-left: -1.5px;
+      }
+
+      &::before {
+        background-color: var(--color-gray-700);
+        box-shadow: -6.5px -6.5px 0 0 var(--color-gray-700), 0 -6.5px 0 0 var(--color-gray-700), 6.5px -6.5px 0 0 var(--color-gray-700), -6.5px 0 0 0 var(--color-gray-700), 6.5px 0 0 0 var(--color-gray-700), -6.5px 6.5px 0 0 var(--color-gray-700), 0 6.5px 0 0 var(--color-gray-700), 6.5px 6.5px 0 0 var(--color-gray-700);
+      }
+
+      &::after {
+        translate: var(--ease-origin-translate-x, 0) var(--ease-origin-translate-y, 0);
+        scale: 1.25;
+        transition: translate 0.3s cubic-bezier(0.25, 0, 0.5, 1);
+      }
+
+      &:hover {
+        background-color: var(--color-gray-850);
+      }
+
+      &:focus-within {
+        background-color: var(--color-gray-825);
+      }
+
+      &[data-value="top-left"] {
+        --ease-origin-translate-x: -6.5px;
+        --ease-origin-translate-y: -6.5px;
+      }
+
+      &[data-value="top-center"] {
+        --ease-origin-translate-x: 0;
+        --ease-origin-translate-y: -6.5px;  
+      }
+      
+      &[data-value="top-right"] {
+        --ease-origin-translate-x: 6.5px;
+        --ease-origin-translate-y: -6.5px;
+      }
+
+      &[data-value="center-left"] {
+        --ease-origin-translate-x: -6.5px;
+        --ease-origin-translate-y: 0
+      }
+
+      &[data-value="center-center"] {
+        --ease-origin-translate-x: 0;
+        --ease-origin-translate-y: 0;
+      }
+
+      &[data-value="center-right"] {
+        --ease-origin-translate-x: 6.5px;
+        --ease-origin-translate-y: 0;
+      }
+      
+      &[data-value="bottom-left"] {
+        --ease-origin-translate-x: -6.5px;
+        --ease-origin-translate-y: 6.5px;
+      }
+      
+      &[data-value="bottom-center"] {
+        --ease-origin-translate-x: 0;
+        --ease-origin-translate-y: 6.5px;
+      }
+      
+      &[data-value="bottom-right"] {
+        --ease-origin-translate-x: 6.5px;
+        --ease-origin-translate-y: 6.5px;
+      }
+    }
+
+    ease-dropdown[part="dropdown"] {
+      --ease-dropdown-max-height: 180px;
+
+      width: 100%;
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <div part="container">
+        <div part="preview" data-value=${this.value ?? 'center-center'}></div>
+        
+        <ease-dropdown part="dropdown" placeholder="Select" id="origin-dropdown" .value=${this.value ?? 'center-center'} fullWidth name=${this.name} @value-change=${this.handleValueChange}>
+          <button slot="content" value="top-left">Top Left</button>
+          <button slot="content" value="top-center">Top Center</button>
+          <button slot="content" value="top-right">Top Right</button>
+          <hr slot="content" />
+          <button slot="content" value="center-left">Center Left</button>
+          <button slot="content" value="center-center">Center Center</button>
+          <button slot="content" value="center-right">Center Right</button>
+          <hr slot="content" />
+          <button slot="content" value="bottom-left">Bottom Left</button>
+          <button slot="content" value="bottom-center">Bottom Center</button>
+          <button slot="content" value="bottom-right">Bottom Right</button>
+        </ease-dropdown>
+      </div>
+    `;
+    }
+})
+class Origin extends HTMLElement {
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'center-center' })
+    accessor value = 'center-center';
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor disabled;
+    @(0, Query_1.Query)('ease-dropdown')
+    accessor control;
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: '' })
+    accessor name = '';
+    afterRender() {
+        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
+    }
+    @(0, Listen_1.Listen)('change', { selector: 'ease-dropdown' })
+    handleChange(event, target) {
+        if (!target) {
+            return;
+        }
+        this.value = String(target.value ?? 'center-center');
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event });
+    }
+    handleValueChange = (event) => {
+        this.value = String(this.control?.value ?? 'center-center');
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event });
+    };
+}
+exports.Origin = Origin;

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

@@ -0,0 +1,12 @@
+import "../dropdown/index.cjs";
+import type { Dropdown } from "../dropdown/index.cjs";
+export declare class Origin extends HTMLElement {
+    requestRender: () => void;
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor control: Dropdown | null;
+    accessor name: string;
+    afterRender(): void;
+    handleChange(event: Event, target?: Dropdown | null): void;
+    handleValueChange: (event: Event) => void;
+}

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

@@ -0,0 +1,12 @@
+import "../dropdown/index.js";
+import type { Dropdown } from "../dropdown/index.js";
+export declare class Origin extends HTMLElement {
+    requestRender: () => void;
+    accessor value: string;
+    accessor disabled: boolean;
+    accessor control: Dropdown | null;
+    accessor name: string;
+    afterRender(): void;
+    handleChange(event: Event, target?: Dropdown | null): void;
+    handleValueChange: (event: Event) => void;
+}