@easemate/web-kit 0.1.0

package/build/elements/toggle/index.cjs

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = 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-toggle',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="control"] {
+      display: block;
+      border-radius: var(--ease-toggle-radius, 10px);
+      padding: var(--ease-toggle-padding, 4px);
+      margin: 0;
+      border: none;
+      outline: none;
+      appearance: none;
+      cursor: pointer;
+      background-color: var(--ease-toggle-on-background, var(--color-blue-900));
+      transition: box-shadow 0.2s, background-color 0.2s;
+    }
+
+    [part="control"] svg {
+      width: var(--ease-toggle-width, 26px);
+      height: var(--ease-toggle-height, 12px);
+      display: block;
+      fill: none;
+      overflow: visible;
+
+      path {
+        transition: scale 0.2s, translate 0.2s, opacity 0.2s;
+        stroke: var(--color-white);
+        fill: var(--color-white-80);
+        stroke-width: 1.5;
+      }
+
+      [part="default"] {
+        transform-origin: 6px 6px;
+      }
+
+      [part="active"] {
+        transform-origin: 23px 6px;
+      }
+
+    }
+
+    :host([disabled]) [part="control"] {
+      cursor: default;
+      opacity: 0.75;
+    }
+
+    :host([checked]) [part="control"] {
+      box-shadow: inset 0 0 0 1px var(--color-white-15), inset 0 1px 0 0 var(--color-white-20), inset 0 4px 6px 0 var(--ease-toggle-shadow, var(--color-white-12));
+
+      &:hover {
+        --ease-toggle-shadow: var(--color-white-30);
+      }
+
+      svg {
+        [part="default"] {
+          scale: .25;
+          translate: 10px 0;
+          opacity: 0;
+        }
+
+        [part="active"] {
+          scale: 1;
+          translate: 0 0;
+        }
+      }
+    }
+
+    :host(:not([checked])) [part="control"] {
+      background-color: var(--ease-toggle-off-background, var(--color-gray-800));
+      box-shadow: inset 0 0 0 1px var(--color-white-10), inset 0 1px 0 0 var(--color-white-10), inset 0 4px 6px 0 var(--ease-toggle-shadow, var(--color-white-6));
+
+      &:hover {
+        --ease-toggle-shadow: var(--color-white-12);
+      }
+
+       svg {
+        [part="default"] {
+          scale: 1;
+          translate: 0 0;
+        }
+
+        [part="active"] {
+          scale: .25;
+          translate: -10px 0;
+          opacity: 0;
+        }
+      }
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <button part="control" type="button" aria-pressed="false">
+        <svg viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#${this.filterId})">
+          <path part="default" d="M0 6C0 2.68629 2.68629 0 6 0V0C9.31371 0 12 2.68629 12 6V6C12 9.31371 9.31371 12 6 12V12C2.68629 12 0 9.31371 0 6V6Z" />
+          <path part="active" d="M14 6C14 2.68629 16.6863 0 20 0V0C23.3137 0 26 2.68629 26 6V6C26 9.31371 23.3137 12 20 12V12C16.6863 12 14 9.31371 14 6V6Z" />
+        </svg>
+
+        <svg style="display: none;">
+          <defs>
+            <filter id="${this.filterId}">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
+              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="gooey" />
+              <feBlend in="SourceGraphic" in2="gooey" />
+            </filter>
+          </defs>
+        </svg>
+      </button>
+    `;
+    }
+})
+class Toggle extends HTMLElement {
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor checked;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor disabled;
+    @(0, Query_1.Query)('button')
+    accessor control;
+    filterId = `filter-${crypto.randomUUID()}`;
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const control = this.control;
+        control.setAttribute('aria-pressed', this.checked ? 'true' : 'false');
+        control.disabled = Boolean(this.disabled);
+        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
+    }
+    @(0, Listen_1.Listen)('click', { selector: 'button' })
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.checked = !this.checked;
+        (0, shared_1.dispatchControlEvent)(this, 'toggle', { value: this.checked, event });
+    }
+}
+exports.Toggle = Toggle;

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

@@ -0,0 +1,9 @@
+export declare class Toggle extends HTMLElement {
+    requestRender: () => void;
+    accessor checked: boolean;
+    accessor disabled: boolean;
+    accessor control: HTMLButtonElement | null;
+    filterId: string;
+    afterRender(): void;
+    handleClick(event: MouseEvent): void;
+}

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

@@ -0,0 +1,9 @@
+export declare class Toggle extends HTMLElement {
+    requestRender: () => void;
+    accessor checked: boolean;
+    accessor disabled: boolean;
+    accessor control: HTMLButtonElement | null;
+    filterId: string;
+    afterRender(): void;
+    handleClick(event: MouseEvent): void;
+}

package/build/elements/toggle/index.js

@@ -0,0 +1,147 @@
+import { html } from 'lit-html';
+import { 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';
+@Component({
+    tag: 'ease-toggle',
+    styles: `
+    :host {
+      display: contents;
+    }
+
+    [part="control"] {
+      display: block;
+      border-radius: var(--ease-toggle-radius, 10px);
+      padding: var(--ease-toggle-padding, 4px);
+      margin: 0;
+      border: none;
+      outline: none;
+      appearance: none;
+      cursor: pointer;
+      background-color: var(--ease-toggle-on-background, var(--color-blue-900));
+      transition: box-shadow 0.2s, background-color 0.2s;
+    }
+
+    [part="control"] svg {
+      width: var(--ease-toggle-width, 26px);
+      height: var(--ease-toggle-height, 12px);
+      display: block;
+      fill: none;
+      overflow: visible;
+
+      path {
+        transition: scale 0.2s, translate 0.2s, opacity 0.2s;
+        stroke: var(--color-white);
+        fill: var(--color-white-80);
+        stroke-width: 1.5;
+      }
+
+      [part="default"] {
+        transform-origin: 6px 6px;
+      }
+
+      [part="active"] {
+        transform-origin: 23px 6px;
+      }
+
+    }
+
+    :host([disabled]) [part="control"] {
+      cursor: default;
+      opacity: 0.75;
+    }
+
+    :host([checked]) [part="control"] {
+      box-shadow: inset 0 0 0 1px var(--color-white-15), inset 0 1px 0 0 var(--color-white-20), inset 0 4px 6px 0 var(--ease-toggle-shadow, var(--color-white-12));
+
+      &:hover {
+        --ease-toggle-shadow: var(--color-white-30);
+      }
+
+      svg {
+        [part="default"] {
+          scale: .25;
+          translate: 10px 0;
+          opacity: 0;
+        }
+
+        [part="active"] {
+          scale: 1;
+          translate: 0 0;
+        }
+      }
+    }
+
+    :host(:not([checked])) [part="control"] {
+      background-color: var(--ease-toggle-off-background, var(--color-gray-800));
+      box-shadow: inset 0 0 0 1px var(--color-white-10), inset 0 1px 0 0 var(--color-white-10), inset 0 4px 6px 0 var(--ease-toggle-shadow, var(--color-white-6));
+
+      &:hover {
+        --ease-toggle-shadow: var(--color-white-12);
+      }
+
+       svg {
+        [part="default"] {
+          scale: 1;
+          translate: 0 0;
+        }
+
+        [part="active"] {
+          scale: .25;
+          translate: -10px 0;
+          opacity: 0;
+        }
+      }
+    }
+  `,
+    template() {
+        return html `
+      <button part="control" type="button" aria-pressed="false">
+        <svg viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#${this.filterId})">
+          <path part="default" d="M0 6C0 2.68629 2.68629 0 6 0V0C9.31371 0 12 2.68629 12 6V6C12 9.31371 9.31371 12 6 12V12C2.68629 12 0 9.31371 0 6V6Z" />
+          <path part="active" d="M14 6C14 2.68629 16.6863 0 20 0V0C23.3137 0 26 2.68629 26 6V6C26 9.31371 23.3137 12 20 12V12C16.6863 12 14 9.31371 14 6V6Z" />
+        </svg>
+
+        <svg style="display: none;">
+          <defs>
+            <filter id="${this.filterId}">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
+              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="gooey" />
+              <feBlend in="SourceGraphic" in2="gooey" />
+            </filter>
+          </defs>
+        </svg>
+      </button>
+    `;
+    }
+})
+export class Toggle extends HTMLElement {
+    @Prop({ type: Boolean, reflect: true })
+    accessor checked;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled;
+    @Query('button')
+    accessor control;
+    filterId = `filter-${crypto.randomUUID()}`;
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        const control = this.control;
+        control.setAttribute('aria-pressed', this.checked ? 'true' : 'false');
+        control.disabled = Boolean(this.disabled);
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+    }
+    @Listen('click', { selector: 'button' })
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.checked = !this.checked;
+        dispatchControlEvent(this, 'toggle', { value: this.checked, event });
+    }
+}

package/build/elements/tooltip/index.cjs

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+require("../popover/index.cjs");
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const OutsideClick_1 = require("~/decorators/OutsideClick");
+const Prop_1 = require("~/decorators/Prop");
+const Query_1 = require("~/decorators/Query");
+@(0, Component_1.Component)({
+    tag: 'ease-tooltip',
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    ease-popover::part(content) {
+      inset: auto;
+    }
+
+    [data-tooltip-content] {
+      background-color: var(--ease-tooltip-background, var(--color-gray-400));
+      color: var(--ease-tooltip-color, var(--color-gray-900));
+      padding: var(--ease-tooltip-padding, 4px 8px);
+      border-radius: var(--ease-tooltip-radius, 4px);
+      font-family: var(--ease-font-family, inherit);
+      font-size: var(--ease-tooltip-font-size, 10px);
+      font-weight: var(--ease-tooltip-font-weight, 500);
+      max-width: var(--ease-tooltip-max-width, 220px);
+      box-shadow: var(--ease-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
+      display: none;
+    }
+
+    :host([open]) [data-tooltip-content] {
+      display: block;
+    }
+  `
+})
+class Tooltip extends HTMLElement {
+    #hoverTimer = null;
+    #trigger = null;
+    #content = null;
+    @(0, Prop_1.Prop)({
+        type: Boolean,
+        reflect: true,
+        onChange(next, previous) {
+            this._handleOpenChange(next, previous);
+        }
+    })
+    accessor open = false;
+    @(0, Prop_1.Prop)({ type: Number, reflect: true, defaultValue: 300 })
+    accessor delay = 300;
+    @(0, Prop_1.Prop)({ reflect: true, defaultValue: 'top-center' })
+    accessor placement = 'top-center';
+    @(0, Query_1.Query)('[slot="trigger"]')
+    accessor triggerElement;
+    @(0, Query_1.Query)('[data-tooltip-content]')
+    accessor contentElement;
+    disconnectedCallback() {
+        this.#clearTimer();
+        if (this.#trigger) {
+            this.#trigger.removeEventListener('mouseenter', this.#handleEnter);
+            this.#trigger.removeEventListener('mouseleave', this.#handleLeave);
+            this.#trigger.removeEventListener('focusin', this.#handleFocusIn);
+            this.#trigger.removeEventListener('focusout', this.#handleFocusOut);
+            this.#trigger = null;
+        }
+        if (this.#content) {
+            this.#content.removeEventListener('mouseenter', this.#handleEnter);
+            this.#content.removeEventListener('mouseleave', this.#handleLeave);
+            this.#content = null;
+        }
+    }
+    afterRender() {
+        this.#updateListeners();
+        const content = this.contentElement;
+        const isVisible = this.open;
+        if (content) {
+            content.setAttribute('role', 'tooltip');
+            content.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
+            content.dataset.open = isVisible ? 'true' : 'false';
+            content.hidden = !isVisible;
+        }
+    }
+    render() {
+        return (0, lit_html_1.html) `
+      <ease-popover .placement=${this.placement} ?open=${this.open}>
+        <slot name="trigger" slot="trigger"></slot>
+        <div
+          data-tooltip-content
+          role="tooltip"
+          data-open=${this.open ? 'true' : 'false'}
+          ?hidden=${!this.open}
+        >
+          <slot></slot>
+        </div>
+      </ease-popover>
+    `;
+    }
+    _handleOpenChange(next, previous) {
+        if (next === previous) {
+            return;
+        }
+        if (!next) {
+            this.#clearTimer();
+        }
+        (0, OutsideClick_1.requestOutsideClickUpdate)(this);
+    }
+    @(0, OutsideClick_1.OutsideClick)({
+        content: (host) => host.contentElement,
+        triggers: (host) => [host.triggerElement],
+        disabled: (host) => !host.open
+    })
+    handleOutsideDismiss() {
+        if (!this.open) {
+            return;
+        }
+        this.#clearTimer();
+        this.open = false;
+    }
+    #clearTimer() {
+        if (this.#hoverTimer !== null) {
+            window.clearTimeout(this.#hoverTimer);
+            this.#hoverTimer = null;
+        }
+    }
+    #startTimer(callback) {
+        this.#clearTimer();
+        const wait = this.delay ?? 0;
+        if (wait > 0) {
+            this.#hoverTimer = window.setTimeout(callback, wait);
+        }
+        else {
+            callback();
+        }
+    }
+    #handleEnter = () => {
+        this.#startTimer(() => {
+            this.open = true;
+        });
+    };
+    #handleLeave = () => {
+        this.#clearTimer();
+        this.open = false;
+    };
+    #handleFocusIn = () => {
+        this.#clearTimer();
+        this.open = true;
+    };
+    #handleFocusOut = () => {
+        this.#clearTimer();
+        this.open = false;
+    };
+    #updateListeners() {
+        const trigger = this.triggerElement;
+        const content = this.contentElement ?? null;
+        if (trigger !== this.#trigger) {
+            if (this.#trigger) {
+                this.#trigger.removeEventListener('mouseenter', this.#handleEnter);
+                this.#trigger.removeEventListener('mouseleave', this.#handleLeave);
+                this.#trigger.removeEventListener('focusin', this.#handleFocusIn);
+                this.#trigger.removeEventListener('focusout', this.#handleFocusOut);
+            }
+            if (trigger) {
+                trigger.addEventListener('mouseenter', this.#handleEnter);
+                trigger.addEventListener('mouseleave', this.#handleLeave);
+                trigger.addEventListener('focusin', this.#handleFocusIn);
+                trigger.addEventListener('focusout', this.#handleFocusOut);
+            }
+            this.#trigger = trigger;
+        }
+        if (content !== this.#content) {
+            if (this.#content) {
+                this.#content.removeEventListener('mouseenter', this.#handleEnter);
+                this.#content.removeEventListener('mouseleave', this.#handleLeave);
+            }
+            if (content) {
+                content.addEventListener('mouseenter', this.#handleEnter);
+                content.addEventListener('mouseleave', this.#handleLeave);
+            }
+            this.#content = content ?? null;
+        }
+    }
+}
+exports.Tooltip = Tooltip;

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

@@ -0,0 +1,17 @@
+import type { Placement } from '~/elements/popover';
+import "../popover/index.cjs";
+import { type TemplateResult } from 'lit-html';
+export declare class Tooltip extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor open: boolean;
+    accessor delay: number;
+    accessor placement: Placement;
+    accessor triggerElement: HTMLElement | null;
+    accessor contentElement: HTMLElement | null;
+    disconnectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+    _handleOpenChange(next: boolean, previous: boolean): void;
+    handleOutsideDismiss(): void;
+}

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

@@ -0,0 +1,17 @@
+import type { Placement } from '~/elements/popover';
+import "../popover/index.js";
+import { type TemplateResult } from 'lit-html';
+export declare class Tooltip extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor open: boolean;
+    accessor delay: number;
+    accessor placement: Placement;
+    accessor triggerElement: HTMLElement | null;
+    accessor contentElement: HTMLElement | null;
+    disconnectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+    _handleOpenChange(next: boolean, previous: boolean): void;
+    handleOutsideDismiss(): void;
+}