@easemate/web-kit 0.1.0

package/build/elements/field/index.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+@(0, Component_1.Component)({
+    tag: 'ease-field',
+    autoSlot: false,
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    [part="field"] {
+      display: grid;
+      grid-template-columns: var(--ease-field-label-width, 36%) auto;
+      column-gap: var(--ease-field-column-gap, 12px);
+      row-gap: var(--ease-field-row-gap, 6px);
+      align-items: center;
+      width: 100%;
+      min-height: var(--ease-field-min-height, 30px);
+      margin: 0;
+      padding: 0;
+    }
+
+    :host([full-width]) [part="field"] {
+      grid-template-columns: 1fr;
+    }
+
+    label {
+      grid-column: 1;
+      font-size: var(--ease-field-label-font-size, var(--ease-font-size-sm, 12px));
+      line-height: var(--ease-field-label-line-height, 1.25);
+      font-weight: var(--ease-field-label-font-weight, 400);
+      text-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-left: var(--ease-field-label-padding-left, 4px);
+      box-sizing: border-box;
+      display: block;
+      max-width: 100%;
+      color: var(--ease-field-label-color, var(--color-gray-600));
+    }
+
+    [part="content"] {
+      grid-column: 2;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    :host([full-width]) [part="content"] {
+      grid-column: 1;
+      align-items: stretch;
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <div part="field">
+        <label>
+            ${this.label ?? ''}
+        </label>
+
+        <div part="content" class=${this.fullWidth ? 'full-width' : ''}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+})
+class Field extends HTMLElement {
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor label;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor fullWidth = false;
+}
+exports.Field = Field;

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

@@ -0,0 +1,4 @@
+export declare class Field extends HTMLElement {
+    accessor label: string | null;
+    accessor fullWidth: boolean;
+}

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

@@ -0,0 +1,4 @@
+export declare class Field extends HTMLElement {
+    accessor label: string | null;
+    accessor fullWidth: boolean;
+}

package/build/elements/field/index.js

@@ -0,0 +1,78 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+@Component({
+    tag: 'ease-field',
+    autoSlot: false,
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    [part="field"] {
+      display: grid;
+      grid-template-columns: var(--ease-field-label-width, 36%) auto;
+      column-gap: var(--ease-field-column-gap, 12px);
+      row-gap: var(--ease-field-row-gap, 6px);
+      align-items: center;
+      width: 100%;
+      min-height: var(--ease-field-min-height, 30px);
+      margin: 0;
+      padding: 0;
+    }
+
+    :host([full-width]) [part="field"] {
+      grid-template-columns: 1fr;
+    }
+
+    label {
+      grid-column: 1;
+      font-size: var(--ease-field-label-font-size, var(--ease-font-size-sm, 12px));
+      line-height: var(--ease-field-label-line-height, 1.25);
+      font-weight: var(--ease-field-label-font-weight, 400);
+      text-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-left: var(--ease-field-label-padding-left, 4px);
+      box-sizing: border-box;
+      display: block;
+      max-width: 100%;
+      color: var(--ease-field-label-color, var(--color-gray-600));
+    }
+
+    [part="content"] {
+      grid-column: 2;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    :host([full-width]) [part="content"] {
+      grid-column: 1;
+      align-items: stretch;
+    }
+  `,
+    template() {
+        return html `
+      <div part="field">
+        <label>
+            ${this.label ?? ''}
+        </label>
+
+        <div part="content" class=${this.fullWidth ? 'full-width' : ''}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+})
+export class Field extends HTMLElement {
+    @Prop({ reflect: true })
+    accessor label;
+    @Prop({ type: Boolean, reflect: true })
+    accessor fullWidth = false;
+}

package/build/elements/icons/animation/chevron.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconChevron = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+@(0, Component_1.Component)({
+    tag: 'ease-icon-chevron',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="chevron"] {
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `,
+    observedAttributes: ['state']
+})
+class IconChevron extends HTMLElement {
+    accessor paths = {
+        down: 'M5 7L8 10L11 7',
+        up: 'M5 9L8 6L11 9'
+    };
+    @(0, Prop_1.Prop)({
+        reflect: true,
+        attribute: 'state',
+        defaultValue: 'down',
+        onAttributeChange(next, previous) {
+            this.shadowRoot
+                ?.querySelector('path')
+                ?.animate([
+                { d: `path('${this.paths[previous]}')` },
+                { d: `path('${this.paths[next]}')` }
+            ], {
+                duration: 200,
+                easing: 'cubic-bezier(0.25, 0, 0.5, 1)'
+            });
+        }
+    })
+    accessor state;
+    render() {
+        return (0, lit_html_1.html) `
+      <svg part="chevron" viewBox="0 0 16 16" state=${this.state} xmlns="http://www.w3.org/2000/svg ">
+        <path d=${this.paths[this.state]} />
+      </svg>
+    `;
+    }
+}
+exports.IconChevron = IconChevron;

package/build/elements/icons/animation/chevron.d.cts

@@ -0,0 +1,10 @@
+import { type TemplateResult } from 'lit-html';
+type ChevronState = 'down' | 'up';
+type ChevronPath = Record<ChevronState, string>;
+export declare class IconChevron extends HTMLElement {
+    requestRender: () => void;
+    accessor paths: ChevronPath;
+    accessor state: ChevronState;
+    render(): TemplateResult;
+}
+export {};

package/build/elements/icons/animation/chevron.d.ts

@@ -0,0 +1,10 @@
+import { type TemplateResult } from 'lit-html';
+type ChevronState = 'down' | 'up';
+type ChevronPath = Record<ChevronState, string>;
+export declare class IconChevron extends HTMLElement {
+    requestRender: () => void;
+    accessor paths: ChevronPath;
+    accessor state: ChevronState;
+    render(): TemplateResult;
+}
+export {};

package/build/elements/icons/animation/chevron.js

@@ -0,0 +1,53 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+@Component({
+    tag: 'ease-icon-chevron',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="chevron"] {
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+  `,
+    observedAttributes: ['state']
+})
+export class IconChevron extends HTMLElement {
+    accessor paths = {
+        down: 'M5 7L8 10L11 7',
+        up: 'M5 9L8 6L11 9'
+    };
+    @Prop({
+        reflect: true,
+        attribute: 'state',
+        defaultValue: 'down',
+        onAttributeChange(next, previous) {
+            this.shadowRoot
+                ?.querySelector('path')
+                ?.animate([
+                { d: `path('${this.paths[previous]}')` },
+                { d: `path('${this.paths[next]}')` }
+            ], {
+                duration: 200,
+                easing: 'cubic-bezier(0.25, 0, 0.5, 1)'
+            });
+        }
+    })
+    accessor state;
+    render() {
+        return html `
+      <svg part="chevron" viewBox="0 0 16 16" state=${this.state} xmlns="http://www.w3.org/2000/svg ">
+        <path d=${this.paths[this.state]} />
+      </svg>
+    `;
+    }
+}

package/build/elements/icons/animation/clear.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconClear = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+@(0, Component_1.Component)({
+    tag: 'ease-icon-clear',
+    styles: `
+    :host {
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: .75;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    [part="clear"] {
+      & > path {
+
+        &:first-child {
+          translate: var(--ease-icon-clear-path-translate, 0);
+          transition: translate var(--ease-icon-clear-path-duration, 0.2s);
+          transition-delay: var(--ease-icon-clear-path-delay, 0s);
+        }
+
+        &:not(:first-child) {
+          stroke-dasharray: 100 0 100;
+          stroke-dashoffset: var(--ease-icon-clear-lines-offset, 100);
+          transition: stroke-dashoffset var(--ease-icon-clear-lines-duration, 0.2s);
+          transition-delay: var(--ease-icon-clear-lines-delay, 0s);
+        }
+      }
+
+      g {
+        path {
+          transform-box: fill-box;
+          transform-origin: 50% 50%;
+          transition: rotate var(--ease-icon-clear-star-duration, 0.2s), scale var(--ease-icon-clear-star-duration, 0.2s);
+
+          &:first-child {
+            rotate: var(--ease-icon-clear-star-1-rotate, 0deg);
+            scale: var(--ease-icon-clear-star-1-scale, 1);
+            transition-delay: var(--ease-icon-clear-star-1-delay, 0s);
+          }
+
+          &:last-child {
+            rotate: var(--ease-icon-clear-star-2-rotate, 0deg);
+            scale: var(--ease-icon-clear-star-2-scale, 1);
+            transition-delay: var(--ease-icon-clear-star-2-delay, 0s);
+          }
+        }
+      }
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <svg part="clear" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.7613 10.334L13.7071 12.2798C14.1011 12.6739 14.1011 13.3127 13.7071 13.7067C13.3131 14.1007 12.6742 14.1007 12.2802 13.7067L10.3344 11.7609M11.7613 10.334L10.9541 8.08932M11.7613 10.334L10.3344 11.7609M10.3344 11.7609L8.08973 10.9537M6.69581 12.3476L12.348 6.69544C12.6942 6.34922 12.6942 5.7879 12.348 5.44168L11.892 4.98574C11.5458 4.63952 10.9845 4.63952 10.6383 4.98574L4.9861 10.6379C4.63989 10.9841 4.63989 11.5454 4.9861 11.8917L5.44204 12.3476C5.78826 12.6938 6.34959 12.6938 6.69581 12.3476Z" />
+        <g>
+          <path d="M3.3313 2.6645H4.66519M3.99824 1.99756V3.33145" />
+          <path d="M4.66516 5.99946H5.99905M5.33211 5.33252V6.66641" />
+        </g>
+        <path d="M7.33301 1.99756L8.6669 3.33145" pathlength="100" />
+        <path d="M3.6648 8.33386L1.99744 6.6665" pathlength="100" />
+      </svg>
+    `;
+    }
+})
+class IconClear extends HTMLElement {
+}
+exports.IconClear = IconClear;

package/build/elements/icons/animation/clear.d.cts

@@ -0,0 +1,3 @@
+export declare class IconClear extends HTMLElement {
+    requestRender: () => void;
+}

package/build/elements/icons/animation/clear.d.ts

@@ -0,0 +1,3 @@
+export declare class IconClear extends HTMLElement {
+    requestRender: () => void;
+}

package/build/elements/icons/animation/clear.js

@@ -0,0 +1,70 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+@Component({
+    tag: 'ease-icon-clear',
+    styles: `
+    :host {
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: .75;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    [part="clear"] {
+      & > path {
+
+        &:first-child {
+          translate: var(--ease-icon-clear-path-translate, 0);
+          transition: translate var(--ease-icon-clear-path-duration, 0.2s);
+          transition-delay: var(--ease-icon-clear-path-delay, 0s);
+        }
+
+        &:not(:first-child) {
+          stroke-dasharray: 100 0 100;
+          stroke-dashoffset: var(--ease-icon-clear-lines-offset, 100);
+          transition: stroke-dashoffset var(--ease-icon-clear-lines-duration, 0.2s);
+          transition-delay: var(--ease-icon-clear-lines-delay, 0s);
+        }
+      }
+
+      g {
+        path {
+          transform-box: fill-box;
+          transform-origin: 50% 50%;
+          transition: rotate var(--ease-icon-clear-star-duration, 0.2s), scale var(--ease-icon-clear-star-duration, 0.2s);
+
+          &:first-child {
+            rotate: var(--ease-icon-clear-star-1-rotate, 0deg);
+            scale: var(--ease-icon-clear-star-1-scale, 1);
+            transition-delay: var(--ease-icon-clear-star-1-delay, 0s);
+          }
+
+          &:last-child {
+            rotate: var(--ease-icon-clear-star-2-rotate, 0deg);
+            scale: var(--ease-icon-clear-star-2-scale, 1);
+            transition-delay: var(--ease-icon-clear-star-2-delay, 0s);
+          }
+        }
+      }
+    }
+  `,
+    template() {
+        return html `
+      <svg part="clear" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11.7613 10.334L13.7071 12.2798C14.1011 12.6739 14.1011 13.3127 13.7071 13.7067C13.3131 14.1007 12.6742 14.1007 12.2802 13.7067L10.3344 11.7609M11.7613 10.334L10.9541 8.08932M11.7613 10.334L10.3344 11.7609M10.3344 11.7609L8.08973 10.9537M6.69581 12.3476L12.348 6.69544C12.6942 6.34922 12.6942 5.7879 12.348 5.44168L11.892 4.98574C11.5458 4.63952 10.9845 4.63952 10.6383 4.98574L4.9861 10.6379C4.63989 10.9841 4.63989 11.5454 4.9861 11.8917L5.44204 12.3476C5.78826 12.6938 6.34959 12.6938 6.69581 12.3476Z" />
+        <g>
+          <path d="M3.3313 2.6645H4.66519M3.99824 1.99756V3.33145" />
+          <path d="M4.66516 5.99946H5.99905M5.33211 5.33252V6.66641" />
+        </g>
+        <path d="M7.33301 1.99756L8.6669 3.33145" pathlength="100" />
+        <path d="M3.6648 8.33386L1.99744 6.6665" pathlength="100" />
+      </svg>
+    `;
+    }
+})
+export class IconClear extends HTMLElement {
+}

package/build/elements/icons/animation/grid.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconGrid = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+@(0, Component_1.Component)({
+    tag: 'ease-icon-grid',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="grid"] {
+      --ease-icon-grid-offset: 100;
+      --ease-icon-grid-rotate: 0deg;
+
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: .75;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+
+      g {
+        &:first-of-type {
+          path {
+            stroke-dasharray: 100 0 100;
+            stroke-dashoffset: var(--ease-icon-grid-offset);
+            transition: stroke-dashoffset 0.2s;
+          }
+        }
+
+        &:last-child {
+          transform-origin: 72.92% 72.92%;
+          transition: rotate 0.35s linear(0, 0.472 7.5%, 0.832 15.5%, 0.97 19.7%, 1.081 24%, 1.166 28.5%, 1.226 33.2%, 1.255 36.9%, 1.271 40.8%, 1.275 44.9%, 1.266 49.4%, 1.222 57.8%, 1.092 75.1%, 1.042 83%, 1.01 91.4%, 1);
+          rotate: var(--ease-icon-grid-rotate);
+        }
+      }
+
+      [data-state="hide"] {
+        --ease-icon-grid-offset: 200;
+        --ease-icon-grid-rotate: 45deg;
+      }
+    }
+  `,
+    observedAttributes: ['state']
+})
+class IconGrid extends HTMLElement {
+    @(0, Prop_1.Prop)({
+        reflect: true,
+        attribute: 'state',
+        defaultValue: 'show'
+    })
+    accessor state;
+    render() {
+        return (0, lit_html_1.html) `
+      <svg part="grid" viewBox="0 0 12 12" state=${this.state} xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.5018 5.49971V3.99909C10.5018 2.6178 9.38204 1.49805 8.00076 1.49805H3.99909C2.6178 1.49805 1.49805 2.6178 1.49805 3.99909V8.00076C1.49805 9.38204 2.6178 10.5018 3.99909 10.5018H5.49971" />
+        <g data-state=${this.state}>
+          <path d="M7.50059 1.49805V5.49971" pathlength="100" />
+          <path d="M4.49937 1.49805V10.5018" pathlength="100" />
+          <path d="M1.49805 7.47081H5.49971" pathlength="100" />
+          <path d="M1.49805 4.46934H10.5018" pathlength="100" />
+        </g>
+        <path d="M8.75118 11.0019C7.50813 11.0018 6.50043 9.99415 6.50024 8.7511C6.51896 7.51461 7.5176 6.51719 8.75412 6.5C9.99728 6.50081 11.0044 7.50925 11.0036 8.75241C11.0028 9.99556 9.99434 11.0027 8.75118 11.0019" />
+        <g data-state=${this.state}>
+          <path d="M8.7512 7.86672V9.63523" />
+          <path d="M9.63545 8.75098H7.86694" />
+        </g>
+      </svg>
+    `;
+    }
+}
+exports.IconGrid = IconGrid;

package/build/elements/icons/animation/grid.d.cts

@@ -0,0 +1,8 @@
+import { type TemplateResult } from 'lit-html';
+type GridState = 'show' | 'hide';
+export declare class IconGrid extends HTMLElement {
+    requestRender: () => void;
+    accessor state: GridState;
+    render(): TemplateResult;
+}
+export {};

package/build/elements/icons/animation/grid.d.ts

@@ -0,0 +1,8 @@
+import { type TemplateResult } from 'lit-html';
+type GridState = 'show' | 'hide';
+export declare class IconGrid extends HTMLElement {
+    requestRender: () => void;
+    accessor state: GridState;
+    render(): TemplateResult;
+}
+export {};

package/build/elements/icons/animation/grid.js

@@ -0,0 +1,73 @@
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+@Component({
+    tag: 'ease-icon-grid',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="grid"] {
+      --ease-icon-grid-offset: 100;
+      --ease-icon-grid-rotate: 0deg;
+
+      display: block;
+      width: var(--ease-icon-size, 16px);
+      height: var(--ease-icon-size, 16px);
+      fill: none;
+      stroke: currentColor;
+      stroke-width: .75;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+
+      g {
+        &:first-of-type {
+          path {
+            stroke-dasharray: 100 0 100;
+            stroke-dashoffset: var(--ease-icon-grid-offset);
+            transition: stroke-dashoffset 0.2s;
+          }
+        }
+
+        &:last-child {
+          transform-origin: 72.92% 72.92%;
+          transition: rotate 0.35s linear(0, 0.472 7.5%, 0.832 15.5%, 0.97 19.7%, 1.081 24%, 1.166 28.5%, 1.226 33.2%, 1.255 36.9%, 1.271 40.8%, 1.275 44.9%, 1.266 49.4%, 1.222 57.8%, 1.092 75.1%, 1.042 83%, 1.01 91.4%, 1);
+          rotate: var(--ease-icon-grid-rotate);
+        }
+      }
+
+      [data-state="hide"] {
+        --ease-icon-grid-offset: 200;
+        --ease-icon-grid-rotate: 45deg;
+      }
+    }
+  `,
+    observedAttributes: ['state']
+})
+export class IconGrid extends HTMLElement {
+    @Prop({
+        reflect: true,
+        attribute: 'state',
+        defaultValue: 'show'
+    })
+    accessor state;
+    render() {
+        return html `
+      <svg part="grid" viewBox="0 0 12 12" state=${this.state} xmlns="http://www.w3.org/2000/svg">
+        <path d="M10.5018 5.49971V3.99909C10.5018 2.6178 9.38204 1.49805 8.00076 1.49805H3.99909C2.6178 1.49805 1.49805 2.6178 1.49805 3.99909V8.00076C1.49805 9.38204 2.6178 10.5018 3.99909 10.5018H5.49971" />
+        <g data-state=${this.state}>
+          <path d="M7.50059 1.49805V5.49971" pathlength="100" />
+          <path d="M4.49937 1.49805V10.5018" pathlength="100" />
+          <path d="M1.49805 7.47081H5.49971" pathlength="100" />
+          <path d="M1.49805 4.46934H10.5018" pathlength="100" />
+        </g>
+        <path d="M8.75118 11.0019C7.50813 11.0018 6.50043 9.99415 6.50024 8.7511C6.51896 7.51461 7.5176 6.51719 8.75412 6.5C9.99728 6.50081 11.0044 7.50925 11.0036 8.75241C11.0028 9.99556 9.99434 11.0027 8.75118 11.0019" />
+        <g data-state=${this.state}>
+          <path d="M8.7512 7.86672V9.63523" />
+          <path d="M9.63545 8.75098H7.86694" />
+        </g>
+      </svg>
+    `;
+    }
+}