@aquera/nile-elements 0.1.75-beta-1.1 → 0.1.75-beta-2.0

package/src/nile-rich-text-editor/nile-rte-select.ts

@@ -0,0 +1,249 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+type HeadingTag = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+type GenericOption = { value: string; label?: string; icon?: string };
+type HeadingOption = { value: HeadingTag; label?: string; icon?: string };
+type NormalizedOption = { value: string; label: string; icon?: string };
+
+const HEADING_ALLOWLIST: ReadonlySet<HeadingTag> = new Set([
+  'p',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]);
+
+function isHeadingTag(v: string): v is HeadingTag {
+  return HEADING_ALLOWLIST.has(v as HeadingTag);
+}
+
+@customElement('nile-rte-select')
+export class NileRteSelect extends LitElement {
+  protected createRenderRoot() {
+    return this;
+  }
+
+  @property({ type: String, attribute: true, reflect: true }) type = '';
+
+  @property({ type: String, attribute: true, reflect: true }) options = '[]';
+
+  @property({ attribute: false })
+  optionsObj?: Array<GenericOption | HeadingOption>;
+
+  @property({ type: String, attribute: true, reflect: true }) label = '';
+
+  @state() private selectedValue = '';
+
+  private mapAlignIcon(v: string) {
+    const map: Record<string, string> = {
+      left: 'format_align_left',
+      center: 'format_align_middle',
+      right: 'format_align_right',
+      justify: 'format_align_justify',
+    };
+    return map[v] || 'format_align_left';
+  }
+  private get parsedOptions(): NormalizedOption[] {
+    const source: unknown = this.optionsObj ?? this.options;
+
+    let rawArray: any[] = (() => {
+      if (Array.isArray(source)) return source;
+      try {
+        return JSON.parse(String(source));
+      } catch {
+        return [];
+      }
+    })();
+
+    if (this.type === 'align' && rawArray.length === 0) {
+      rawArray = [
+        { value: 'left', label: 'Align Left' },
+        { value: 'center', label: 'Align Center' },
+        { value: 'right', label: 'Align Right' },
+        { value: 'justify', label: 'Justify' },
+      ];
+    }
+
+    let items: NormalizedOption[] = rawArray.map((o: any) => {
+      const value: string = o?.value ?? o;
+      const label: string = o?.label ?? o?.value ?? o;
+      const icon: string | undefined =
+        o?.icon ??
+        (this.type === 'align' ? this.mapAlignIcon(String(value)) : undefined);
+      return { value, label, icon };
+    });
+
+    if (this.type === 'heading') {
+      const before = items.length;
+      items = items.filter(i => isHeadingTag(i.value));
+      if (items.length !== before) {
+      }
+      if (this.selectedValue && !isHeadingTag(this.selectedValue)) {
+        this.selectedValue = '';
+      }
+    }
+
+    return items;
+  }
+
+  private ensureDefault() {
+    if (!this.selectedValue) {
+      const first = this.parsedOptions[0];
+      if (first) this.selectedValue = first.value;
+    }
+  }
+
+  private onSelect(value: string) {
+    if (this.type === 'heading' && !isHeadingTag(value)) {
+      console.warn(
+        `[nile-rte-select] Ignoring invalid heading value: ${value}`
+      );
+      return;
+    }
+    this.selectedValue = value;
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: value,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.injectLocalStyles();
+  }
+
+  private injectLocalStyles() {
+    if (this.querySelector('style[data-rte-select-style]')) return;
+
+    const style = document.createElement('style');
+    style.setAttribute('data-rte-select-style', 'true');
+    style.textContent = `
+      nile-menu.rte-align-menu::part(menu__items-wrapper) {
+        display: flex;
+      }
+      nile-menu.rte-align-menu,
+      nile-menu.rte-default-menu {
+        margin-top: 0px;
+      }
+      nile-button.rte-align-trigger::part(base),
+      nile-button.rte-default-trigger::part(base) {
+        min-width: 32px;
+        height: 32px;
+        padding: 0px 6px;
+        box-shadow: none;
+      }
+  nile-button.rte-align-trigger::part(base) {
+
+  border: none;
+}
+
+ 
+    `;
+    this.insertBefore(style, this.firstChild);
+  }
+
+  render() {
+    const opts = this.parsedOptions;
+    this.ensureDefault();
+    const current = opts.find(o => o.value === this.selectedValue);
+
+    if (this.type === 'align') {
+      const trigger = current?.icon
+        ? html`<nile-icon name="${current.icon}"></nile-icon>`
+        : this.label || 'Align';
+
+      return html`
+        <nile-dropdown class="rte-align-dd">
+          <nile-button
+            slot="trigger"
+            variant="tertiary"
+            class="rte-align-trigger"
+          >
+            ${trigger}
+          </nile-button>
+          <nile-menu class="rte-align-menu">
+            ${opts.map(
+              o => html`
+                <nile-menu-item
+                  class="rte-align-item"
+                  ?active=${o.value === this.selectedValue}
+                  @click=${() => this.onSelect(o.value)}
+                >
+                  <nile-tooltip hoist content="${o.label}">
+                    <nile-icon name="${o.icon}"></nile-icon>
+                  </nile-tooltip>
+                </nile-menu-item>
+              `
+            )}
+          </nile-menu>
+        </nile-dropdown>
+      `;
+    }
+
+    if (this.type === 'font') {
+      const triggerText = current?.label || this.label || 'Font';
+      return html`
+        <nile-dropdown class="rte-default-dd">
+          <nile-button
+            slot="trigger"
+            variant="tertiary"
+            class="rte-default-trigger"
+            style="font-family: ${current?.value || 'inherit'}"
+          >
+            ${triggerText} <nile-icon name="arrowdown"></nile-icon>
+          </nile-button>
+          <nile-menu class="rte-default-menu">
+            ${opts.map(
+              o => html`
+                <nile-menu-item
+                  style="font-family: ${o.value}"
+                  ?active=${o.value === this.selectedValue}
+                  @click=${() => this.onSelect(o.value)}
+                >
+                  ${o.label}
+                </nile-menu-item>
+              `
+            )}
+          </nile-menu>
+        </nile-dropdown>
+      `;
+    }
+
+    const triggerText = current?.label || this.label || 'Select';
+    return html`
+      <nile-dropdown class="rte-default-dd">
+        <nile-button
+          slot="trigger"
+          variant="tertiary"
+          class="rte-default-trigger"
+        >
+          ${triggerText} <nile-icon name="arrowdown"></nile-icon>
+        </nile-button>
+        <nile-menu class="rte-default-menu">
+          ${opts.map(
+            o => html`
+              <nile-menu-item
+                ?active=${o.value === this.selectedValue}
+                @click=${() => this.onSelect(o.value)}
+              >
+                ${o.label}
+              </nile-menu-item>
+            `
+          )}
+        </nile-menu>
+      </nile-dropdown>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-rte-select': NileRteSelect;
+  }
+}

package/src/nile-rich-text-editor/nile-rte-toolbar-item.ts

@@ -0,0 +1,13 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('nile-rte-toolbar-item')
+export class NileRteToolbarItem extends LitElement {
+  protected createRenderRoot() { return this; }
+  protected shouldUpdate() { return false; }
+
+  @property({ type: String, attribute: true, reflect: true }) name = '';
+  @property({ type: String, attribute: true, reflect: true }) label = '';
+
+}
+declare global { interface HTMLElementTagNameMap { 'nile-rte-toolbar-item': NileRteToolbarItem; } }

package/src/nile-rich-text-editor/nile-rte-toolbar.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('nile-rte-toolbar')
+export class NileRteToolbar extends LitElement {
+  protected createRenderRoot() { return this; }     
+  protected shouldUpdate() { return false; }      
+}
+declare global { interface HTMLElementTagNameMap { 'nile-rte-toolbar': NileRteToolbar; } }