@easemate/web-kit 0.1.0

package/build/elements/radio/input.cjs

@@ -0,0 +1,329 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioInput = 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-radio-input',
+    shadowMode: 'open',
+    styles: `
+    .radio {
+      display: table;
+      border-radius: var(--ease-radio-input-radius, 12px);
+      position: relative;
+    }
+
+    [part="radio"] {
+      display: table;
+      appearance: none;
+      outline: none;
+      border: none;
+      background: none;
+      margin: 0;
+      padding: 0;
+      border-radius: inherit;
+    }
+
+    [part="control"] {
+      appearance: none;
+      outline: none;
+      border: none;
+      background: none;
+      display: block;
+      cursor: pointer;
+      margin: 0;
+      padding: 0;
+      border-radius: inherit;
+      width: var(--ease-radio-input-size, 24px);
+      height: var(--ease-radio-input-size, 24px);
+    }
+
+    .radio svg {
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      pointer-events: none;
+      fill: var(--ease-radio-input-dot-color, var(--color-blue-100));
+      transform: scale(1.01) translateZ(0);
+    }
+
+    [part="control"] {
+      box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
+    }
+
+    .radio svg .top {
+      transform-origin: 12px -12px;
+      transform: translateY(0) scale(1.75, 1) translateZ(0);
+      opacity: 0;
+    }
+
+    .radio svg .dot {
+      transform: translateY(-17px) translateZ(0);
+      opacity: 0;
+    }
+
+    .radio svg .drop {
+      transform: translateY(-14px) translateZ(0);
+      opacity: 0;
+    }
+
+    [part="control"]:checked {
+      box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+    }
+
+    [part="control"]:checked + svg .top {
+      transform: translateY(0px) scale(1.75, 1) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="control"]:checked + svg .dot {
+      transform: translateY(0px) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="control"]:checked + svg .drop {
+      transform: translateY(0px) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="control"].anim-checked {
+      animation: radio-border-expand 0.8s ease-out forwards;
+    }
+
+    [part="control"].anim-checked + svg .top {
+      animation: radio-top 0.8s ease-out 0.2s forwards;
+    }
+
+    [part="control"].anim-checked + svg .dot {
+      animation: radio-dot 0.6s ease-out 0.2s forwards;
+    }
+
+    [part="control"].anim-checked + svg .drop {
+      animation: radio-drop 0.6s ease-out 0.4s forwards;
+    }
+
+    [part="control"].anim-unchecked {
+      animation: radio-border-contract 0.8s ease-out forwards;
+    }
+
+    [part="control"].anim-unchecked + svg .top {
+      animation: radio-top-reverse 0.8s ease-out forwards;
+    }
+
+    [part="control"].anim-unchecked + svg .dot {
+      animation: radio-dot-reverse 0.6s ease-out forwards;
+    }
+
+    [part="control"].anim-unchecked + svg .drop {
+      animation: radio-drop-reverse 0.6s ease-out forwards;
+    }
+
+    @keyframes radio-border-expand {
+      0% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
+      }
+      25% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-max, 12px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+      100% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+    }
+
+    @keyframes radio-top {
+      0% {
+        transform: translateY(0) scale(1.75, 1) translateZ(0);
+      }
+      25% {
+        transform: translateY(6px) scale(1, 1.25) translateZ(0);
+      }
+      100% {
+        transform: translateY(0px) scale(1.75, 1) translateZ(0);
+      }
+    }
+
+    @keyframes radio-dot {
+      0% {
+        transform: translateY(-17px) translateZ(0);
+      }
+      50% {
+        transform: translateY(2px) translateZ(0);
+      }
+      100% {
+        transform: translateY(0px) translateZ(0);
+      }
+    }
+
+    @keyframes radio-drop {
+      0% {
+        transform: translateY(-14px) translateZ(0);
+      }
+      100% {
+        transform: translateY(0px) translateZ(0);
+      }
+    }
+
+    @keyframes radio-border-contract {
+      0% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+      75% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-max, 12px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+      100% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
+      }
+    }
+
+    @keyframes radio-top-reverse {
+      0% {
+        transform: translateY(0px) scale(1.75, 1) translateZ(0);
+        opacity: 1;
+      }
+      75% {
+        transform: translateY(6px) scale(1, 1.25) translateZ(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(0) scale(1.75, 1) translateZ(0);
+        opacity: 0;
+      }
+    }
+
+    @keyframes radio-dot-reverse {
+      0% {
+        transform: translateY(0px) translateZ(0);
+        opacity: 1;
+      }
+      50% {
+        transform: translateY(2px) translateZ(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-17px) translateZ(0);
+        opacity: 0;
+      }
+    }
+
+    @keyframes radio-drop-reverse {
+      0% {
+        transform: translateY(0px) translateZ(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-14px) translateZ(0);
+        opacity: 0;
+      }
+    }
+  `,
+    template() {
+        return (0, lit_html_1.html) `
+      <button part="radio" type="button" role="radio" aria-checked=${this.checked} ?disabled=${this.disabled}>
+        <div class="radio">
+          <input part="control" name=${this.name} value=${this.value} ?checked=${this.checked} ?disabled=${this.disabled} type="radio" />
+          <svg viewBox="0 0 24 24" filter="url(#${this.filterId})">
+              <circle class="top" cx="12" cy="-12" r="8" />
+              <circle class="dot" cx="12" cy="12" r="5" />
+              <circle class="drop" cx="12" cy="12" r="2" />
+          </svg>
+        </div>
+
+        <svg style="display: none;">
+          <defs>
+            <filter id="${this.filterId}">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="1.25" 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 RadioInput extends HTMLElement {
+    @(0, Prop_1.Prop)({
+        type: Boolean,
+        reflect: true,
+        onChange(next) {
+            if (next && this.name) {
+                const form = this.closest('form');
+                const root = form ?? this.getRootNode();
+                const others = Array.from(root.querySelectorAll(`ease-radio-input[name="${this.name}"]`));
+                others.forEach((other) => {
+                    if (other !== this && other.checked) {
+                        other.checked = false;
+                    }
+                });
+            }
+        }
+    })
+    accessor checked;
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor name;
+    @(0, Prop_1.Prop)({ reflect: true })
+    accessor value;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor disabled;
+    @(0, Query_1.Query)('button')
+    accessor control;
+    _prevChecked;
+    _firstRender = true;
+    filterId = `goo-${crypto.randomUUID()}`;
+    connectedCallback() {
+        this._prevChecked = this.checked;
+    }
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        if (this._firstRender) {
+            this._firstRender = false;
+            this._prevChecked = this.checked;
+        }
+        const changed = typeof this._prevChecked !== 'undefined' && this.checked !== this._prevChecked;
+        if (changed) {
+            this._triggerAnimation(this.checked);
+            this._prevChecked = this.checked;
+        }
+        const control = this.control;
+        control.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        control.disabled = Boolean(this.disabled);
+        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
+    }
+    _triggerAnimation(checked) {
+        const input = this.shadowRoot?.querySelector('[part="control"]');
+        const svg = this.shadowRoot?.querySelector('svg[viewBox="0 0 24 24"]');
+        if (!input || !svg) {
+            return;
+        }
+        input.classList.remove('anim-checked', 'anim-unchecked');
+        svg.classList.remove('anim-checked', 'anim-unchecked');
+        const animClass = checked ? 'anim-checked' : 'anim-unchecked';
+        input.classList.add(animClass);
+        svg.classList.add(animClass);
+        const duration = 800; // Longest animation duration in ms
+        setTimeout(() => {
+            input.classList.remove(animClass);
+            svg.classList.remove(animClass);
+        }, duration);
+    }
+    @(0, Listen_1.Listen)('click', { selector: 'button' })
+    handleClick(event) {
+        if (this.disabled || this.checked) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.checked = true;
+        (0, shared_1.dispatchControlEvent)(this, 'radio', { value: this.checked, event });
+    }
+}
+exports.RadioInput = RadioInput;

package/build/elements/radio/input.d.cts

@@ -0,0 +1,15 @@
+export declare class RadioInput extends HTMLElement {
+    requestRender: () => void;
+    accessor checked: boolean;
+    accessor name: string | null;
+    accessor value: string | null;
+    accessor disabled: boolean;
+    accessor control: HTMLButtonElement | null;
+    private _prevChecked?;
+    private _firstRender;
+    filterId: string;
+    connectedCallback(): void;
+    afterRender(): void;
+    private _triggerAnimation;
+    handleClick(event: MouseEvent): void;
+}

package/build/elements/radio/input.d.ts

@@ -0,0 +1,15 @@
+export declare class RadioInput extends HTMLElement {
+    requestRender: () => void;
+    accessor checked: boolean;
+    accessor name: string | null;
+    accessor value: string | null;
+    accessor disabled: boolean;
+    accessor control: HTMLButtonElement | null;
+    private _prevChecked?;
+    private _firstRender;
+    filterId: string;
+    connectedCallback(): void;
+    afterRender(): void;
+    private _triggerAnimation;
+    handleClick(event: MouseEvent): void;
+}

package/build/elements/radio/input.js

@@ -0,0 +1,325 @@
+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-radio-input',
+    shadowMode: 'open',
+    styles: `
+    .radio {
+      display: table;
+      border-radius: var(--ease-radio-input-radius, 12px);
+      position: relative;
+    }
+
+    [part="radio"] {
+      display: table;
+      appearance: none;
+      outline: none;
+      border: none;
+      background: none;
+      margin: 0;
+      padding: 0;
+      border-radius: inherit;
+    }
+
+    [part="control"] {
+      appearance: none;
+      outline: none;
+      border: none;
+      background: none;
+      display: block;
+      cursor: pointer;
+      margin: 0;
+      padding: 0;
+      border-radius: inherit;
+      width: var(--ease-radio-input-size, 24px);
+      height: var(--ease-radio-input-size, 24px);
+    }
+
+    .radio svg {
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      pointer-events: none;
+      fill: var(--ease-radio-input-dot-color, var(--color-blue-100));
+      transform: scale(1.01) translateZ(0);
+    }
+
+    [part="control"] {
+      box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
+    }
+
+    .radio svg .top {
+      transform-origin: 12px -12px;
+      transform: translateY(0) scale(1.75, 1) translateZ(0);
+      opacity: 0;
+    }
+
+    .radio svg .dot {
+      transform: translateY(-17px) translateZ(0);
+      opacity: 0;
+    }
+
+    .radio svg .drop {
+      transform: translateY(-14px) translateZ(0);
+      opacity: 0;
+    }
+
+    [part="control"]:checked {
+      box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+    }
+
+    [part="control"]:checked + svg .top {
+      transform: translateY(0px) scale(1.75, 1) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="control"]:checked + svg .dot {
+      transform: translateY(0px) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="control"]:checked + svg .drop {
+      transform: translateY(0px) translateZ(0);
+      opacity: 1;
+    }
+
+    [part="control"].anim-checked {
+      animation: radio-border-expand 0.8s ease-out forwards;
+    }
+
+    [part="control"].anim-checked + svg .top {
+      animation: radio-top 0.8s ease-out 0.2s forwards;
+    }
+
+    [part="control"].anim-checked + svg .dot {
+      animation: radio-dot 0.6s ease-out 0.2s forwards;
+    }
+
+    [part="control"].anim-checked + svg .drop {
+      animation: radio-drop 0.6s ease-out 0.4s forwards;
+    }
+
+    [part="control"].anim-unchecked {
+      animation: radio-border-contract 0.8s ease-out forwards;
+    }
+
+    [part="control"].anim-unchecked + svg .top {
+      animation: radio-top-reverse 0.8s ease-out forwards;
+    }
+
+    [part="control"].anim-unchecked + svg .dot {
+      animation: radio-dot-reverse 0.6s ease-out forwards;
+    }
+
+    [part="control"].anim-unchecked + svg .drop {
+      animation: radio-drop-reverse 0.6s ease-out forwards;
+    }
+
+    @keyframes radio-border-expand {
+      0% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
+      }
+      25% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-max, 12px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+      100% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+    }
+
+    @keyframes radio-top {
+      0% {
+        transform: translateY(0) scale(1.75, 1) translateZ(0);
+      }
+      25% {
+        transform: translateY(6px) scale(1, 1.25) translateZ(0);
+      }
+      100% {
+        transform: translateY(0px) scale(1.75, 1) translateZ(0);
+      }
+    }
+
+    @keyframes radio-dot {
+      0% {
+        transform: translateY(-17px) translateZ(0);
+      }
+      50% {
+        transform: translateY(2px) translateZ(0);
+      }
+      100% {
+        transform: translateY(0px) translateZ(0);
+      }
+    }
+
+    @keyframes radio-drop {
+      0% {
+        transform: translateY(-14px) translateZ(0);
+      }
+      100% {
+        transform: translateY(0px) translateZ(0);
+      }
+    }
+
+    @keyframes radio-border-contract {
+      0% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+      75% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-max, 12px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
+      }
+      100% {
+        box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
+      }
+    }
+
+    @keyframes radio-top-reverse {
+      0% {
+        transform: translateY(0px) scale(1.75, 1) translateZ(0);
+        opacity: 1;
+      }
+      75% {
+        transform: translateY(6px) scale(1, 1.25) translateZ(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(0) scale(1.75, 1) translateZ(0);
+        opacity: 0;
+      }
+    }
+
+    @keyframes radio-dot-reverse {
+      0% {
+        transform: translateY(0px) translateZ(0);
+        opacity: 1;
+      }
+      50% {
+        transform: translateY(2px) translateZ(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-17px) translateZ(0);
+        opacity: 0;
+      }
+    }
+
+    @keyframes radio-drop-reverse {
+      0% {
+        transform: translateY(0px) translateZ(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translateY(-14px) translateZ(0);
+        opacity: 0;
+      }
+    }
+  `,
+    template() {
+        return html `
+      <button part="radio" type="button" role="radio" aria-checked=${this.checked} ?disabled=${this.disabled}>
+        <div class="radio">
+          <input part="control" name=${this.name} value=${this.value} ?checked=${this.checked} ?disabled=${this.disabled} type="radio" />
+          <svg viewBox="0 0 24 24" filter="url(#${this.filterId})">
+              <circle class="top" cx="12" cy="-12" r="8" />
+              <circle class="dot" cx="12" cy="12" r="5" />
+              <circle class="drop" cx="12" cy="12" r="2" />
+          </svg>
+        </div>
+
+        <svg style="display: none;">
+          <defs>
+            <filter id="${this.filterId}">
+              <feGaussianBlur in="SourceGraphic" stdDeviation="1.25" 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 RadioInput extends HTMLElement {
+    @Prop({
+        type: Boolean,
+        reflect: true,
+        onChange(next) {
+            if (next && this.name) {
+                const form = this.closest('form');
+                const root = form ?? this.getRootNode();
+                const others = Array.from(root.querySelectorAll(`ease-radio-input[name="${this.name}"]`));
+                others.forEach((other) => {
+                    if (other !== this && other.checked) {
+                        other.checked = false;
+                    }
+                });
+            }
+        }
+    })
+    accessor checked;
+    @Prop({ reflect: true })
+    accessor name;
+    @Prop({ reflect: true })
+    accessor value;
+    @Prop({ type: Boolean, reflect: true })
+    accessor disabled;
+    @Query('button')
+    accessor control;
+    _prevChecked;
+    _firstRender = true;
+    filterId = `goo-${crypto.randomUUID()}`;
+    connectedCallback() {
+        this._prevChecked = this.checked;
+    }
+    afterRender() {
+        if (!this.control) {
+            return;
+        }
+        if (this._firstRender) {
+            this._firstRender = false;
+            this._prevChecked = this.checked;
+        }
+        const changed = typeof this._prevChecked !== 'undefined' && this.checked !== this._prevChecked;
+        if (changed) {
+            this._triggerAnimation(this.checked);
+            this._prevChecked = this.checked;
+        }
+        const control = this.control;
+        control.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        control.disabled = Boolean(this.disabled);
+        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
+    }
+    _triggerAnimation(checked) {
+        const input = this.shadowRoot?.querySelector('[part="control"]');
+        const svg = this.shadowRoot?.querySelector('svg[viewBox="0 0 24 24"]');
+        if (!input || !svg) {
+            return;
+        }
+        input.classList.remove('anim-checked', 'anim-unchecked');
+        svg.classList.remove('anim-checked', 'anim-unchecked');
+        const animClass = checked ? 'anim-checked' : 'anim-unchecked';
+        input.classList.add(animClass);
+        svg.classList.add(animClass);
+        const duration = 800; // Longest animation duration in ms
+        setTimeout(() => {
+            input.classList.remove(animClass);
+            svg.classList.remove(animClass);
+        }, duration);
+    }
+    @Listen('click', { selector: 'button' })
+    handleClick(event) {
+        if (this.disabled || this.checked) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.checked = true;
+        dispatchControlEvent(this, 'radio', { value: this.checked, event });
+    }
+}

package/build/elements/radio/option.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioOption = void 0;
+class RadioOption extends HTMLElement {
+    connectedCallback() {
+        this.hidden = true;
+        if (!this.hasAttribute('slot')) {
+            this.setAttribute('slot', 'option');
+        }
+    }
+}
+exports.RadioOption = RadioOption;
+if (!customElements.get('radio-option')) {
+    customElements.define('radio-option', RadioOption);
+}

package/build/elements/radio/option.d.cts

@@ -0,0 +1,3 @@
+export declare class RadioOption extends HTMLElement {
+    connectedCallback(): void;
+}

package/build/elements/radio/option.d.ts

@@ -0,0 +1,3 @@
+export declare class RadioOption extends HTMLElement {
+    connectedCallback(): void;
+}