@easemate/web-kit 0.2.0 → 0.3.0

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

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

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

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

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

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

package/build/elements/tooltip/index.js

@@ -1,183 +0,0 @@
-import "../popover/index.js";
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { OutsideClick, requestOutsideClickUpdate } from '../../decorators/OutsideClick';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-@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;
-    }
-  `
-})
-export class Tooltip extends HTMLElement {
-    #hoverTimer = null;
-    #trigger = null;
-    #content = null;
-    @Prop({
-        type: Boolean,
-        reflect: true,
-        onChange(next, previous) {
-            this._handleOpenChange(next, previous);
-        }
-    })
-    accessor open = false;
-    @Prop({ type: Number, reflect: true, defaultValue: 300 })
-    accessor delay = 300;
-    @Prop({ reflect: true, defaultValue: 'top-center' })
-    accessor placement = 'top-center';
-    @Query('[slot="trigger"]')
-    accessor triggerElement;
-    @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 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();
-        }
-        requestOutsideClickUpdate(this);
-    }
-    @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;
-        }
-    }
-}