@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/number/index.cjs

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

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

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

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

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

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

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