@aquera/nile-elements 0.1.67-beta-1.1 → 0.1.67-beta-1.3

package/src/nile-richcodeeditor/nile-richcodeeditor.ts

@@ -0,0 +1,192 @@
+import { LitElement, html, css, CSSResultGroup } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+@customElement('nile-richcodeeditor')
+export class NileRichcodeeditor extends LitElement {
+  /**
+   * Component styles
+   */
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      font-family: Arial, sans-serif;
+    }
+    .toolbar {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .toolbar button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      background: var(--toolbar-bg, #f0f0f0);
+      border: 1px solid #ccc;
+      border-radius: 3px;
+    }
+    .toolbar button:hover {
+      background: var(--toolbar-hover-bg, #e0e0e0);
+    }
+    .toolbar svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+    .editor {
+      min-height: 200px;
+      border: 1px solid #ccc;
+      padding: 8px;
+      border-radius: 4px;
+      outline: none;
+    }
+    .editor img {
+      max-width: 100%;
+      height: auto;
+    }
+    .preview {
+      margin-top: 16px;
+      padding: 8px;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      background: #fafafa;
+    }
+    input[type="file"] {
+      display: none;
+    }
+  `;
+
+  @query('.editor') private editor!: HTMLElement;
+  @query('.image-input') private fileInput!: HTMLInputElement;
+  @state() private content = '';
+  @state() private currentAlign: 'left' | 'center' | 'right' | '' = '';
+
+  firstUpdated() {
+    this.editor.addEventListener('input', () => this.updateContent());
+    this.fileInput.addEventListener('change', e => this.handleImageUpload(e));
+  }
+
+  private applyHeading(level: number) {
+    const parent = this.editor.parentNode;
+    if (!parent) return;
+    this.revertToNormal();
+    const wrapper = document.createElement(`h${level}`);
+    parent.insertBefore(wrapper, this.editor);
+    wrapper.appendChild(this.editor);
+    this.updateContent();
+  }
+
+  private applyList() {
+    const parent = this.editor.parentNode;
+    if (!parent) return;
+    this.revertToNormal();
+    const ul = document.createElement('ul');
+    const li = document.createElement('li');
+    parent.insertBefore(ul, this.editor);
+    ul.appendChild(li);
+    li.appendChild(this.editor);
+    this.updateContent();
+  }
+
+  private triggerImageUpload() {
+    this.fileInput.click();
+  }
+
+  private handleImageUpload(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file?.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const img = document.createElement('img');
+        img.src = reader.result as string;
+        img.alt = file.name;
+        const sel = window.getSelection();
+        if (sel?.rangeCount) {
+          const range = sel.getRangeAt(0);
+          range.deleteContents();
+          range.insertNode(img);
+          range.setStartAfter(img);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } else {
+          this.editor.appendChild(img);
+        }
+        this.updateContent();
+      };
+      reader.readAsDataURL(file);
+    }
+    input.value = '';
+  }
+
+  private applyAlign(alignment: 'left' | 'center' | 'right') {
+    this.currentAlign = alignment;
+    this.editor.style.textAlign = alignment;
+    this.updateContent();
+  }
+
+  private revertToNormal() {
+    const parent = this.editor.parentNode as HTMLElement;
+    if (!parent) return;
+    const tag = parent.nodeName;
+    if (!['H1', 'H2', 'H3', 'UL'].includes(tag)) return;
+    const grand = parent.parentNode;
+    if (!grand) return;
+    grand.insertBefore(this.editor, parent);
+    grand.removeChild(parent);
+    this.updateContent();
+  }
+
+  private updateContent() {
+    const raw = this.editor.innerHTML;
+    const parent = this.editor.parentNode as HTMLElement;
+    let htmlContent = '';
+    if (['H1', 'H2', 'H3'].includes(parent.nodeName)) {
+      const tag = parent.nodeName.toLowerCase();
+      const style = this.currentAlign ? ` style=\"text-align:${this.currentAlign}\"` : '';
+      htmlContent = `<${tag}${style}>${raw}</${tag}>`;
+    } else if (parent.nodeName === 'UL') {
+      const wrapStart = this.currentAlign ? `<div style=\"text-align:${this.currentAlign}\">` : '';
+      const wrapEnd = this.currentAlign ? '</div>' : '';
+      htmlContent = `${wrapStart}<ul><li>${raw}</li></ul>${wrapEnd}`;
+    } else {
+      htmlContent = this.currentAlign
+        ? `<div style=\"text-align:${this.currentAlign}\">${raw}</div>`
+        : raw;
+    }
+    this.content = htmlContent;
+  }
+
+  render() {
+    return html`
+      <div class="toolbar">
+        <button title="H1" @mousedown=${(e: MouseEvent) => e.preventDefault()} @click=${() => this.applyHeading(1)}>H1</button>
+        <button title="H2" @click=${() => this.applyHeading(2)}>H2</button>
+        <button title="H3" @click=${() => this.applyHeading(3)}>H3</button>
+        <button title="Align Left" @click=${() => this.applyAlign('left')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="3" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="3" y="19" width="12" height="2"/></svg></button>
+        <button title="Align Center" @click=${() => this.applyAlign('center')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="6" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="6" y="19" width="12" height="2"/></svg></button>
+        <button title="Align Right" @click=${() => this.applyAlign('right')}><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="2"/><rect x="9" y="9" width="12" height="2"/><rect x="3" y="14" width="18" height="2"/><rect x="9" y="19" width="12" height="2"/></svg></button>
+        <button title="Image" @click=${() => this.triggerImageUpload()}><svg viewBox="0 0 24 24"><path d="M21 19V5a2 2 0 0 0-2-2H5c-1.1 0-2 .9-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H6l2.5-4.5z"/></svg></button>
+        <button title="Normal" @click=${() => this.revertToNormal()}><svg viewBox="0 0 24 24"><text x="4" y="18" font-size="18">T</text></svg></button>
+      </div>
+      <input class="image-input" type="file" accept="image/*" />
+      <div class="editor" contenteditable="true"></div>
+      <div class="preview">${unsafeHTML(this.content)}</div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap { 'nile-richcodeeditor': NileRichcodeeditor; }
+}

package/src/nile-table-body/nile-table-body.css.ts

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { tableLayoutStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableBody CSS
@@ -49,8 +48,6 @@ export const styles = css`
   slot::slotted(nile-table-row:last-child) {
     border-bottom: 0px;
   }
-
-  ${tableLayoutStyles}
 `;
 
 export default [styles];

package/src/nile-table-body/nile-table-body.ts

@@ -24,7 +24,6 @@ import {
 import { styles } from './nile-table-body.css';
 import NileElement from '../internal/nile-element';
 import { getInnerHTML } from '../slot';
-import { hasResizableColumns } from '../internal/resizable-table-helper';
 
 /**
  * nile-table-body component.
@@ -47,7 +46,6 @@ export class NileTableBody extends NileElement {
   @state() private header_rows_data: any[] = [];
   @state() private sort__index: number;
   @state() private search__index: number;
-  @state() private hasResizableColumns = false;
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -69,10 +67,6 @@ export class NileTableBody extends NileElement {
     return this.header_rows_data.indexOf(index__value);
   }
 
-  private checkForResizableColumns() {
-    this.hasResizableColumns = hasResizableColumns(this);
-  }
-
   handleSlotchange(e: any) {
     let row_data: any = [];
     this._childNodes.forEach((child: any) => {
@@ -94,8 +88,6 @@ export class NileTableBody extends NileElement {
         row_data = [];
       }
     });
-    
-    this.checkForResizableColumns();
   }
 
   private handleSort(e: any) {
@@ -123,7 +115,6 @@ export class NileTableBody extends NileElement {
           @slotchange=${this.handleSlotchange}
           @nile-click-sort=${this.handleSort}
           class="nile__table__body"
-          ?resizable=${this.hasResizableColumns}
           @nile-search=${this.handleSearch}
         ></slot>
       </div>

package/src/nile-table-cell-item/nile-table-cell-item.css.ts

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableCellItem CSS
@@ -20,20 +19,11 @@ export const styles = css`
     box-sizing: border-box;
     display: table-cell;
     vertical-align: middle;
+    max-width: var(--max--cell-width);
     padding: 16px 24px;
-    max-width: var(--max--cell-width);  
     min-height: var(--min--height);
   }
 
-  .cell__wrapper {
-    height: 100%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    width: 100%;
-  }
-
   .column {
     min-width:var(--min-cell-width);
     width:var(--cell-width);
@@ -46,15 +36,7 @@ export const styles = css`
     /* line-height: var(--nile-type-scale-6); */
     line-height: normal;
     letter-spacing: 0.2px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
   }
-
-  ${resizableHostStyles}
-  ${resizerStyles}
-  ${resizableSlotStyles}
 `;
 
 export default [styles];

package/src/nile-table-cell-item/nile-table-cell-item.ts

@@ -15,7 +15,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-table-cell-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile table Cell Item component.
@@ -34,36 +33,20 @@ export class NileTableCellItem extends NileElement {
     return [styles];
   }
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   /* #endregion */
 
   /* #region Methods */
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   /**
    * Render method
    * @slot This is a slot test
    */
   public render(): TemplateResult {
-    if (this.resizable) {
-      return html`
-        <div class="cell__wrapper" part="nile__table-cell">
-          ${this.hasSlotController.test('[default]')
-            ? html` <div class="column" part="nile__table-cell"><slot></slot></div>`
-            : ''}
-          <div class="resizer" @mousedown=${this.handleResizeStart}></div>
-        </div>
-      `;
-    } else {
-      return html`
-        ${this.hasSlotController.test('[default]')
-          ? html` <slot class="column" part="nile__table-cell"> </slot>`
-          : ''}
-      `;
-    }
+    return html`
+      ${this.hasSlotController.test('[default]')
+        ? html` <slot class="column" part="nile__table-cell"> </slot>`
+        : ''}
+    `;
   }
 
   /* #endregion */

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -6,7 +6,6 @@
  */
 
 import { css } from 'lit';
-import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
 
 /**
  * TableHeaderItem CSS
@@ -45,8 +44,6 @@ export const styles = css`
     font-style: normal;
     /* line-height: var(--nile-type-scale-5); */
     line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   nile-icon {
@@ -70,9 +67,6 @@ export const styles = css`
   .headers:hover .hover__arrow {
     opacity: 0.3;
   }
-
-  ${resizableHeaderStyles}
-  ${headerResizerStyles}
 `;
 
 export default [styles];

package/src/nile-table-header-item/nile-table-header-item.ts

@@ -15,7 +15,6 @@ import { customElement, state, property } from 'lit/decorators.js';
 import { styles } from './nile-table-header-item.css';
 import NileElement from '../internal/nile-element';
 import { HasSlotController } from '../internal/slot';
-import { createResizeHandler } from '../internal/resizable-table-helper';
 
 /**
  * Nile icon component.
@@ -44,9 +43,6 @@ export class NileTableHeaderItem extends NileElement {
   @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =
     '';
 
-  /** Enables the resize functionality. */
-  @property({ type: Boolean, reflect: true }) resizable = false;
-
   @state() sorting_ct = 0;
 
   /* #endregion */
@@ -70,10 +66,9 @@ export class NileTableHeaderItem extends NileElement {
     this.emit('nile-search', { value: e.detail.value });
   }
 
-  private handleResizeStart = createResizeHandler(this, 50);
-
   public render(): TemplateResult {
-    return html`
+    return html` ${this.hasSlotController.test('[default]')
+      ? html`
       <div class="header__item__wrapper" part="nile__table-header-cell">
         <div class="headers">
           <slot> </slot>
@@ -114,11 +109,10 @@ export class NileTableHeaderItem extends NileElement {
               </nile-popover>`
             : html``}
         </div>
-        ${this.resizable 
-          ? html`<div class="resizer" @mousedown=${this.handleResizeStart}></div>`
-          : null}
-      </div>`;
+      </div>`
+      : null}`;
   }
+  /* #endregion */
 }
 
 export default NileTableHeaderItem;

package/src/nile-table-row/nile-table-row.css.ts

@@ -27,57 +27,6 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
-
-.row-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.row {
-  cursor: default;
-  position: relative;       
-  display: flex;
-  align-items: center;
-}
-
-.row.expandable {
-  border-bottom: 1px solid var(--nile-table-row-border-color);
-}
- 
-
-.expanded-content {
-  overflow: hidden;
-  transition: max-height 0.3s ease;
-}
-
-.row.expandable .expand-icon {
-  margin-right: 4px;
-}
- 
-.row ::slotted(nile-table-cell-item),
-.row ::slotted(nile-table-header-item) {
-  flex: 1 1 0;           
-  box-sizing: border-box; 
-}
-
-
-.row-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.expand-icon {
-  position: absolute;
-  left: 0.40em;            
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  font-size: 1em;
-  line-height: 1;
-  user-select: none;
-  z-index: 1;
-}
- 
 `;
 
 export default [styles];

package/src/nile-table-row/nile-table-row.ts

@@ -27,6 +27,7 @@ export class NileTableRow extends NileElement {
    * The styles for TableRow
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
+
   public static get styles(): CSSResultArray {
     return [styles];
   }
@@ -40,28 +41,6 @@ export class NileTableRow extends NileElement {
    * @slot This is a slot test
    */
 
-
-
-
-  @property({ type: Boolean, reflect: true }) expandable = false;
-
-
-  @property({ type: Boolean, reflect: true }) expanded = false;
-
-  @query('slot[name="expanded"]')
-  private _expandedSlot!: HTMLSlotElement;
-
-
-  private toggleExpand(e: MouseEvent): void {
-    this.expanded = !this.expanded;
-    this.dispatchEvent(new CustomEvent('nile-change', {
-      detail: { expanded: this.expanded },
-      bubbles: true,
-      composed: true,
-    }));
-  }
-
-
   private handleSortingAlter(event: CustomEvent) {
     const header_items: any = [
       ...this.querySelectorAll('nile-table-header-item'),
@@ -77,38 +56,16 @@ export class NileTableRow extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div part="row-container" class="row-container">
-        <div
-          part="nile-row"
-          class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
-          @nile-click-sort="${this.handleSortingAlter}"
-        >
-          ${this.expandable
-            ? html`
-            <slot name="expandableIcon">
-              <nile-icon
-                class="expand-icon"
-                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
-                @click=${this.toggleExpand}
-                role="button"
-                size="10"
-                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
-              </nile-icon> </slot>`
-            : null}
-          <slot></slot>
-        </div>
-
-        ${this.expandable && this.expanded
-          ? html`
-              <div class="expanded-content">
-                <slot name="expanded"></slot>
-              </div>`
-          : null}
-      </div>
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
     `;
   }
+
   /* #endregion */
 }
+
 export default NileTableRow;
 
 declare global {