etherpad-webcomponents 0.0.1

package/dist/EpTheme.js

@@ -0,0 +1,109 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+export const themes = {
+    colibris: {
+        '--bg-color': 'white',
+        '--bg-soft-color': '#f2f3f4',
+        '--text-color': '#485365',
+        '--text-soft-color': '#576273',
+        '--middle-color': '#d2d2d2',
+        '--dark-color': '#576273',
+        '--super-dark-color': '#485365',
+        '--light-color': '#f2f3f4',
+        '--super-light-color': 'white',
+        '--primary-color': '#64d29b',
+        '--main-font-family': 'Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
+    },
+    'colibris-dark': {
+        '--bg-color': '#2c3143',
+        '--bg-soft-color': '#363b50',
+        '--text-color': '#e4e6eb',
+        '--text-soft-color': '#a8adb8',
+        '--middle-color': '#4a5068',
+        '--dark-color': '#a8adb8',
+        '--super-dark-color': '#e4e6eb',
+        '--light-color': '#363b50',
+        '--super-light-color': '#2c3143',
+        '--primary-color': '#64d29b',
+        '--main-font-family': 'Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif',
+    },
+    'high-contrast': {
+        '--bg-color': 'white',
+        '--bg-soft-color': '#f5f5f5',
+        '--text-color': '#111111',
+        '--text-soft-color': '#333333',
+        '--middle-color': '#999999',
+        '--dark-color': '#333333',
+        '--super-dark-color': '#111111',
+        '--light-color': '#f5f5f5',
+        '--super-light-color': 'white',
+        '--primary-color': '#0066cc',
+        '--main-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    },
+    warm: {
+        '--bg-color': '#fdfbf7',
+        '--bg-soft-color': '#f5f0e8',
+        '--text-color': '#4a3f35',
+        '--text-soft-color': '#7a6e62',
+        '--middle-color': '#d6cfc5',
+        '--dark-color': '#7a6e62',
+        '--super-dark-color': '#4a3f35',
+        '--light-color': '#f5f0e8',
+        '--super-light-color': '#fdfbf7',
+        '--primary-color': '#c47a4a',
+        '--main-font-family': 'Georgia, "Times New Roman", serif',
+    },
+};
+let EpTheme = class EpTheme extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = 'colibris';
+    }
+    updated(changed) {
+        if (changed.has('name')) {
+            this._applyTokens();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._applyTokens();
+    }
+    _applyTokens() {
+        const tokens = themes[this.name];
+        if (!tokens)
+            return;
+        for (const [prop, value] of Object.entries(tokens)) {
+            this.style.setProperty(prop, value);
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    /** Register a custom theme at runtime. */
+    static registerTheme(name, tokens) {
+        themes[name] = tokens;
+    }
+    /** Get all registered theme names. */
+    static get themeNames() {
+        return Object.keys(themes);
+    }
+};
+EpTheme.styles = css `
+    :host {
+      display: contents;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], EpTheme.prototype, "name", void 0);
+EpTheme = __decorate([
+    customElement('ep-theme')
+], EpTheme);
+export { EpTheme };
+//# sourceMappingURL=EpTheme.js.map

package/dist/EpTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpTheme.js","sourceRoot":"","sources":["../src/EpTheme.ts"],"names":[],"mappings":"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"}

package/dist/EpToast.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+type ToastType = 'success' | 'error' | 'info';
+interface ToastOptions {
+    message: string;
+    type?: ToastType;
+    duration?: number;
+}
+export declare class EpToastItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: ToastType;
+    message: string;
+    duration: number;
+    private _dismissTimer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    dismiss(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export declare class EpToastContainer extends LitElement {
+    static styles: import("lit").CSSResult;
+    position: ToastPosition;
+    private static _instance;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    static getInstance(): EpToastContainer;
+    addToast(options: ToastOptions): EpToastItem;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ep-toast-item': EpToastItem;
+        'ep-toast-container': EpToastContainer;
+    }
+}
+export {};
+//# sourceMappingURL=EpToast.d.ts.map

package/dist/EpToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpToast.d.ts","sourceRoot":"","sources":["../src/EpToast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,KAAK,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,CAAC;AAC/E,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,UAAU,YAAY;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAQD,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BAsEX;IAE2B,IAAI,EAAE,SAAS,CAAU;IAC1C,OAAO,SAAM;IACG,QAAQ,SAAQ;IAE5C,OAAO,CAAC,aAAa,CAA8C;IAEnE,iBAAiB;IAQjB,oBAAoB;IAKpB,OAAO;IAeP,MAAM;CAWP;AAID,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,0BAuBX;IAE2B,QAAQ,EAAE,aAAa,CAAe;IAEnE,OAAO,CAAC,MAAM,CAAC,SAAS,CAAiC;IAEzD,iBAAiB;IAKjB,oBAAoB;IAKpB,MAAM;IAIN,MAAM,CAAC,WAAW,IAAI,gBAAgB;IAQtC,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;CAkB7C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/EpToast.js

@@ -0,0 +1,220 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var EpToastContainer_1;
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+const toastIconSvg = {
+    success: `<svg class="icon" viewBox="0 0 16 16" fill="var(--primary-color, #64d29b)"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/></svg>`,
+    error: `<svg class="icon" viewBox="0 0 16 16" fill="#d9534f"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm.75-9.25a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM8 11a1 1 0 100 2 1 1 0 000-2z"/></svg>`,
+    info: `<svg class="icon" viewBox="0 0 16 16" fill="var(--dark-color, #576273)"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm.75-9.25a.75.75 0 00-1.5 0v4.5a.75.75 0 001.5 0v-4.5zM8 11a1 1 0 100 2 1 1 0 000-2z"/></svg>`,
+};
+let EpToastItem = class EpToastItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'info';
+        this.message = '';
+        this.duration = 4000;
+        this._dismissTimer = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        requestAnimationFrame(() => this.setAttribute('visible', ''));
+        if (this.duration > 0) {
+            this._dismissTimer = setTimeout(() => this.dismiss(), this.duration);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._dismissTimer != null)
+            clearTimeout(this._dismissTimer);
+    }
+    dismiss() {
+        if (this._dismissTimer != null) {
+            clearTimeout(this._dismissTimer);
+            this._dismissTimer = null;
+        }
+        this.removeAttribute('visible');
+        this.setAttribute('removing', '');
+        const cleanup = () => {
+            this.removeEventListener('transitionend', cleanup);
+            this.remove();
+        };
+        this.addEventListener('transitionend', cleanup);
+        setTimeout(cleanup, 300);
+    }
+    render() {
+        const icon = toastIconSvg[this.type] ?? toastIconSvg.info;
+        return html `
+      <div class="toast" role="status" aria-live="polite">
+        ${unsafeHTML(icon)}
+        <span class="message">${this.message}</span>
+        <button class="close" aria-label="Dismiss"
+                @click="${() => this.dismiss()}">&times;</button>
+      </div>
+    `;
+    }
+};
+EpToastItem.styles = css `
+    :host {
+      --ep-font: var(--main-font-family, Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);
+
+      display: block;
+      pointer-events: auto;
+      font-family: var(--ep-font);
+      font-size: 14px;
+      line-height: 1.5;
+      opacity: 0;
+      transform: translateX(16px);
+      transition: opacity 0.25s ease, transform 0.25s ease;
+    }
+
+    :host([visible]) {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    :host([removing]) {
+      opacity: 0;
+      transform: translateX(16px);
+      transition: opacity 0.2s ease, transform 0.2s ease;
+    }
+
+    :host([slide-from="left"]) { transform: translateX(-16px); }
+    :host([slide-from="left"][visible]) { transform: translateX(0); }
+    :host([slide-from="left"][removing]) { transform: translateX(-16px); }
+
+    .toast {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 16px;
+      border-radius: 5px;
+      box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+      background: var(--bg-color, white);
+      color: var(--text-color, #485365);
+      border-left: 3px solid var(--middle-color, #d2d2d2);
+    }
+
+    :host([type="success"]) .toast { border-left-color: var(--primary-color, #64d29b); }
+    :host([type="error"]) .toast { border-left-color: #d9534f; }
+    :host([type="info"]) .toast { border-left-color: var(--dark-color, #576273); }
+
+    .icon { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
+    .message { flex: 1; min-width: 0; word-wrap: break-word; }
+
+    .close {
+      flex-shrink: 0;
+      background: none;
+      border: none;
+      color: var(--text-soft-color, #576273);
+      cursor: pointer;
+      padding: 0;
+      opacity: 0.5;
+      transition: opacity 0.15s ease;
+      font-size: 16px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .close:hover, .close:focus-visible { opacity: 1; }
+    .close:focus-visible {
+      outline: 2px solid var(--primary-color, #64d29b);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+  `;
+__decorate([
+    property({ reflect: true })
+], EpToastItem.prototype, "type", void 0);
+__decorate([
+    property()
+], EpToastItem.prototype, "message", void 0);
+__decorate([
+    property({ type: Number })
+], EpToastItem.prototype, "duration", void 0);
+EpToastItem = __decorate([
+    customElement('ep-toast-item')
+], EpToastItem);
+export { EpToastItem };
+const MAX_VISIBLE = 5;
+let EpToastContainer = EpToastContainer_1 = class EpToastContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.position = 'top-right';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        EpToastContainer_1._instance = this;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (EpToastContainer_1._instance === this)
+            EpToastContainer_1._instance = null;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    static getInstance() {
+        if (EpToastContainer_1._instance)
+            return EpToastContainer_1._instance;
+        const container = document.createElement('ep-toast-container');
+        container.position = 'top-right';
+        document.body.appendChild(container);
+        return container;
+    }
+    addToast(options) {
+        const existing = this.querySelectorAll('ep-toast-item');
+        if (existing.length >= MAX_VISIBLE) {
+            existing[0].dismiss();
+        }
+        const toast = document.createElement('ep-toast-item');
+        toast.message = options.message;
+        toast.type = options.type ?? 'info';
+        toast.duration = options.duration ?? 4000;
+        if (this.position.includes('left')) {
+            toast.setAttribute('slide-from', 'left');
+        }
+        this.appendChild(toast);
+        return toast;
+    }
+};
+EpToastContainer.styles = css `
+    :host {
+      position: fixed;
+      z-index: 10002;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      pointer-events: none;
+      max-width: 380px;
+      width: 100%;
+      font-size: 14px;
+    }
+
+    :host([position="top-right"]), :host(:not([position])) {
+      top: 16px; right: 16px;
+    }
+    :host([position="top-left"]) { top: 16px; left: 16px; }
+    :host([position="bottom-right"]) {
+      bottom: 16px; right: 16px; flex-direction: column-reverse;
+    }
+    :host([position="bottom-left"]) {
+      bottom: 16px; left: 16px; flex-direction: column-reverse;
+    }
+  `;
+EpToastContainer._instance = null;
+__decorate([
+    property({ reflect: true })
+], EpToastContainer.prototype, "position", void 0);
+EpToastContainer = EpToastContainer_1 = __decorate([
+    customElement('ep-toast-container')
+], EpToastContainer);
+export { EpToastContainer };
+//# sourceMappingURL=EpToast.js.map

package/dist/EpToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpToast.js","sourceRoot":"","sources":["../src/EpToast.ts"],"names":[],"mappings":"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"}

package/dist/EpToolbarSelect.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import './EpDropdown.js';
+import './EpDropdownItem.js';
+interface ToolbarSelectOption {
+    label: string;
+    value: string;
+}
+export declare class EpToolbarSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    options: ToolbarSelectOption[];
+    value: string;
+    iconClass: string;
+    label: string;
+    placeholder: string;
+    render(): import("lit").TemplateResult<1>;
+    private _onSelect;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ep-toolbar-select': EpToolbarSelect;
+    }
+}
+export {};
+//# sourceMappingURL=EpToolbarSelect.d.ts.map

package/dist/EpToolbarSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpToolbarSelect.d.ts","sourceRoot":"","sources":["../src/EpToolbarSelect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAE7B,UAAU,mBAAmB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,0BAiEX;IAEyB,OAAO,EAAE,mBAAmB,EAAE,CAAM;IACnD,KAAK,SAAM;IACgB,SAAS,SAAM;IAC1C,KAAK,SAAM;IACX,WAAW,SAAM;IAE7B,MAAM;IA2BN,OAAO,CAAC,SAAS;CAOlB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/EpToolbarSelect.js

@@ -0,0 +1,138 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './EpDropdown.js';
+import './EpDropdownItem.js';
+let EpToolbarSelect = class EpToolbarSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.value = '';
+        this.iconClass = '';
+        this.label = '';
+        this.placeholder = '';
+    }
+    render() {
+        const selected = this.options.find(o => o.value === this.value);
+        const visibleLabel = selected?.label ?? this.placeholder ?? this.label ?? '';
+        const title = this.label && selected
+            ? `${this.label}: ${selected.label}`
+            : (this.label || visibleLabel);
+        return html `
+      <ep-dropdown align="left" trigger="click"
+                   @ep-dropdown-select="${this._onSelect}">
+        <button slot="trigger" type="button" class="trigger"
+                title="${title}" aria-label="${title}">
+          ${this.iconClass
+            ? html `<span class="icon buttonicon ${this.iconClass}"></span>`
+            : ''}
+          <span class="text">${visibleLabel}</span>
+          <span class="caret" aria-hidden="true"></span>
+        </button>
+        <div slot="content">
+          ${this.options.map(opt => html `
+            <ep-dropdown-item value="${opt.value}">${opt.label}</ep-dropdown-item>
+          `)}
+        </div>
+      </ep-dropdown>
+    `;
+    }
+    _onSelect(e) {
+        this.value = String(e.detail?.value ?? '');
+        this.dispatchEvent(new CustomEvent('ep-toolbar-select:change', {
+            bubbles: true, composed: true,
+            detail: { value: this.value },
+        }));
+    }
+};
+EpToolbarSelect.styles = css `
+    :host {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    ep-dropdown {
+      display: flex;
+      align-items: center;
+    }
+
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      min-width: 28px;
+      height: 28px;
+      padding: 0 8px;
+      border: none;
+      border-radius: 3px;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+      white-space: nowrap;
+      font: inherit;
+    }
+
+    .trigger:hover {
+      background-color: var(--bg-soft-color, #f2f3f4);
+      color: var(--text-color, #485365);
+    }
+
+    .trigger:focus-visible {
+      outline: 2px solid var(--dark-color, #576273);
+      outline-offset: 1px;
+    }
+
+    .icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+    }
+
+    .text {
+      display: inline-block;
+      min-width: 0;
+      max-width: 96px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .caret {
+      flex: 0 0 auto;
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      transform: translateY(-1px) rotate(45deg);
+      opacity: 0.7;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], EpToolbarSelect.prototype, "options", void 0);
+__decorate([
+    property()
+], EpToolbarSelect.prototype, "value", void 0);
+__decorate([
+    property({ attribute: 'icon-class' })
+], EpToolbarSelect.prototype, "iconClass", void 0);
+__decorate([
+    property()
+], EpToolbarSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], EpToolbarSelect.prototype, "placeholder", void 0);
+EpToolbarSelect = __decorate([
+    customElement('ep-toolbar-select')
+], EpToolbarSelect);
+export { EpToolbarSelect };
+//# sourceMappingURL=EpToolbarSelect.js.map

package/dist/EpToolbarSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpToolbarSelect.js","sourceRoot":"","sources":["../src/EpToolbarSelect.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,iBAAiB,CAAC;AACzB,OAAO,qBAAqB,CAAC;AAQtB,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAoEsB,YAAO,GAA0B,EAAE,CAAC;QACnD,UAAK,GAAG,EAAE,CAAC;QACgB,cAAS,GAAG,EAAE,CAAC;QAC1C,UAAK,GAAG,EAAE,CAAC;QACX,gBAAW,GAAG,EAAE,CAAC;IAoC/B,CAAC;IAlCC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QAChE,MAAM,YAAY,GAAG,QAAQ,EAAE,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC7E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,QAAQ;YAClC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,EAAE;YACpC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,CAAC,CAAC;QAEjC,OAAO,IAAI,CAAA;;0CAE2B,IAAI,CAAC,SAAS;;yBAE/B,KAAK,iBAAiB,KAAK;YACxC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,WAAW;YAC/D,CAAC,CAAC,EAAE;+BACe,YAAY;;;;YAI/B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAA;uCACD,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK;WACnD,CAAC;;;KAGP,CAAC;IACJ,CAAC;IAEO,SAAS,CAAC,CAAc;QAC9B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,0BAA0B,EAAE;YAC7D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;YAC7B,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;SAC9B,CAAC,CAAC,CAAC;IACN,CAAC;;AA1GM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiElB,AAjEY,CAiEX;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAqC;AACnD;IAAX,QAAQ,EAAE;8CAAY;AACgB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;kDAAgB;AAC1C;IAAX,QAAQ,EAAE;8CAAY;AACX;IAAX,QAAQ,EAAE;oDAAkB;AAxElB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA4G3B"}

package/dist/EpUserBadge.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class EpUserBadge extends LitElement {
+    static styles: import("lit").CSSResult;
+    name: string;
+    color: string;
+    size: 'small' | 'medium' | 'large';
+    online: boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ep-user-badge': EpUserBadge;
+    }
+}
+//# sourceMappingURL=EpUserBadge.d.ts.map

package/dist/EpUserBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpUserBadge.d.ts","sourceRoot":"","sources":["../src/EpUserBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,0BA8CX;IAEU,IAAI,SAAM;IACV,KAAK,SAAa;IACD,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAC/B,MAAM,UAAS;IAE3D,MAAM;CASP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/EpUserBadge.js

@@ -0,0 +1,90 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let EpUserBadge = class EpUserBadge extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.color = '#485365';
+        this.size = 'medium';
+        this.online = false;
+    }
+    render() {
+        const initial = this.name ? this.name.charAt(0) : '?';
+        return html `
+      <div class="avatar" style="background: ${this.color}">
+        ${initial}
+      </div>
+      ${this.name ? html `<span class="name">${this.name}</span>` : ''}
+    `;
+    }
+};
+EpUserBadge.styles = css `
+    :host {
+      --ep-font: var(--main-font-family, Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: var(--ep-font);
+      font-size: 14px;
+      color: var(--text-color, #485365);
+    }
+
+    .avatar {
+      width: var(--ep-badge-size, 24px);
+      height: var(--ep-badge-size, 24px);
+      border-radius: 50%;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      font-weight: 700;
+      color: white;
+      text-transform: uppercase;
+    }
+
+    :host([size="small"]) .avatar {
+      --ep-badge-size: 18px;
+      font-size: 9px;
+    }
+
+    :host([size="large"]) .avatar {
+      --ep-badge-size: 32px;
+      font-size: 14px;
+    }
+
+    .name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 140px;
+      font-weight: 500;
+    }
+
+    :host([online]) .avatar {
+      box-shadow: 0 0 0 2px var(--bg-color, white), 0 0 0 3px var(--text-soft-color, #576273);
+    }
+  `;
+__decorate([
+    property()
+], EpUserBadge.prototype, "name", void 0);
+__decorate([
+    property()
+], EpUserBadge.prototype, "color", void 0);
+__decorate([
+    property({ reflect: true })
+], EpUserBadge.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EpUserBadge.prototype, "online", void 0);
+EpUserBadge = __decorate([
+    customElement('ep-user-badge')
+], EpUserBadge);
+export { EpUserBadge };
+//# sourceMappingURL=EpUserBadge.js.map

package/dist/EpUserBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpUserBadge.js","sourceRoot":"","sources":["../src/EpUserBadge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAiDO,SAAI,GAAG,EAAE,CAAC;QACV,UAAK,GAAG,SAAS,CAAC;QACD,SAAI,GAAiC,QAAQ,CAAC;QAC/B,WAAM,GAAG,KAAK,CAAC;IAW7D,CAAC;IATC,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACtD,OAAO,IAAI,CAAA;+CACgC,IAAI,CAAC,KAAK;UAC/C,OAAO;;QAET,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;KAChE,CAAC;IACJ,CAAC;;AA7DM,kBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8ClB,AA9CY,CA8CX;AAEU;IAAX,QAAQ,EAAE;yCAAW;AACV;IAAX,QAAQ,EAAE;0CAAmB;AACD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA+C;AAC/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAgB;AApDhD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA+DvB"}