@aquera/nile-elements 1.9.5 → 1.9.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-chip/nile-chip.css.ts

@@ -89,11 +89,13 @@ export const styles = css`
   }
 
   .nile-chip {
-    padding: var(--nile-spacing-5px,var( --ng-spacing-md)) var(--nile-spacing-10px,var(--ng-spacing-lg));
+    padding: var(--nile-spacing-5px,var(--ng-spacing-xs)) var(--nile-spacing-10px,var(--ng-spacing-lg));
+    min-height: var(--ng-height-40px);
     background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));
     border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));
     border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));
     display: flex;
+    align-items: center;
     flex-wrap: wrap;
     width: 100%;
     overflow-x: hidden;
@@ -102,6 +104,7 @@ export const styles = css`
 
   nile-input::part(base) {
     padding: 0px !important;
+    height: auto;
   }
 
   .nile-chip--no-wrap {
@@ -171,6 +174,10 @@ export const styles = css`
   nile-auto-complete::part(input) {
     padding: var(--nile-spacing-lg, var(--ng-spacing-none));
   }
+
+  nile-auto-complete::part(base) {
+    height: auto;
+  }
   
   .nile-chip:hover:not(.nile-chip--disabled) {
     border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-neutral));

package/src/nile-code-editor/nile-code-editor.ts

@@ -298,12 +298,12 @@ export class NileCodeEditor extends NileElement {
       ${this.expandable && !this.disabled
       ? html` 
         <div @click="${(e: CustomEvent) => this.emit('nile-expand')}" class="expand__icon__container">
-          <nile-icon
+          <nile-glyph
             name="${this.expandIcon}"
-            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            method="var(--nile-svg-method-fill, var(--ng-svg-method-fill))"
             size="16"
             color="black"
-          ></nile-icon>
+          ></nile-glyph>
         </div>`
       : ''}
       </div>

package/src/nile-hero/nile-hero.css.ts

@@ -37,12 +37,12 @@ export const styles = css`
 
 	.hero__container--collapsed{
 		height: 67px;
-		background-color: var(--nile-hero-collapsed-background);
+		background-color: var(--nile-hero-collapsed-background, var(--ng-colors-bg-primary));
 	}
 
 	.hero__container--expanded{
-		height:var(--nile-hero-height);
-		background:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient) 0%,  var( --nile-hero-color-bg-to-gradient) 100%);
+		height:var(--nile-hero-height, var(--ng-height-200px));
+		background:linear-gradient(180deg, var( --nile-hero-color-bg-from-gradient, var(--ng-color-bluelight-50)) 0%,  var( --nile-hero-color-bg-to-gradient, var(--ng-componentcolors-utility-gray-200)) 100%);
 	}
 
 	.icon__container {
@@ -50,17 +50,17 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: var(--nile-radius-radius-xl);
-		border: 1px solid var(--nile-colors-neutral-400);
-		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
+		border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+		border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient, var(--ng-colors-bg-primary)) 0%, var(--nile-hero-color-icon-bg-to-gradient, var(--ng-colors-bg-secondary)) 100%);
 	}
 
 	.hero__slot__container {
-		height:var(--nile-hero-height);
-		padding-left: var(--nile-spacing-5xl);
+		height:var(--nile-hero-height, var(--ng-height-200px));
+		padding-left: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
 		display: flex;
 		align-items: center;
-		gap:var(--nile-spacing-spacing-xl);
+		gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
 		position: absolute;
 		left: 0;
 		bottom:0;
@@ -69,11 +69,11 @@ export const styles = css`
 
 	.hero__slot {
 		display: flex;
-		gap:var(--nile-spacing-spacing-xl);
+		gap:var(--nile-spacing-spacing-xl, var(--ng-spacing-xl));
 	}
 
 	.hero__img__container {
-		height:var(--nile-hero-height);
+		height:var(--nile-hero-height, var(--ng-height-200px));
 		overflow:hidden;
 		width:max-content;
 		position: absolute;
@@ -84,7 +84,7 @@ export const styles = css`
 
 	.hero__img {
 		object-fit:cover;
-		height:var(--nile-hero-height);
+		height:var(--nile-hero-height, var(--ng-height-200px));
 		width:auto;
 	}
 `;

package/src/nile-hero/nile-hero.ts

@@ -52,7 +52,7 @@ export class NileHero extends NileElement {
 			<div class="hero__slot__container" style="opacity:${this.collapse?0:1}">
 			 <div class="hero__slot">
 			 	<span class="icon__container">
-					<nile-icon size="16" method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" name="${this.icon}"></nile-icon>
+					<nile-icon size="16" method="var(--nile-svg-method-stroke, var(--ng-svg-method-fill))" name="${this.icon}"></nile-icon>
 				</span>
 				<slot></slot>
 			 </div>

package/src/nile-hero-header/nile-hero-header.css.ts

@@ -16,8 +16,8 @@ export const styles = css`
 		width:100%;
 		display: flex;
 		align-items: center;
-		padding:var(--nile-spacing-xl) var(--nile-spacing-5xl);
-		gap: var(--nile-spacing-xl);
+		padding:var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-5xl, var(--ng-spacing-5xl));
+		gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
 		border-bottom: 1px solid rgb(234, 236, 240);
 		-webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
@@ -29,17 +29,17 @@ export const styles = css`
 		aspect-ratio: 1 / 1;
 		place-items: center;
 		display: grid;
-		border-radius: var(--nile-radius-radius-xl);
-		border: 1px solid var(--nile-colors-neutral-400);
-		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient) 0%, var(--nile-hero-color-icon-bg-to-gradient) 100%);
+		border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
+		border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+		background: linear-gradient(180deg, var(--nile-hero-color-icon-bg-from-gradient, var(--ng-colors-bg-primary)) 0%, var(--nile-hero-color-icon-bg-to-gradient, var(--ng-colors-bg-secondary)) 100%);
 	}
 
 	.hero__text {
-		color: var(--nile-hero-text-color);
-		font-size: var(--nile-hero-text-font-size);
-		line-height: var(--nile-hero-text-line-height);
+		color: var(--nile-hero-text-color, var(--ng-colors-text-primary-900));
+		font-size: var(--nile-hero-text-font-size, var(--ng-font-size-text-md));
+		line-height: var(--nile-hero-text-line-height, var(--ng-line-height-text-md));
 		font-style: normal;
-		font-weight: var(--nile-hero-text-font-weight);
+		font-weight: var(--nile-hero-text-font-weight, var(--ng-font-weight-bold));
 	}
 `;
 

package/src/nile-hero-header/nile-hero-header.ts

@@ -41,7 +41,7 @@ export class NileHeroHeader extends NileElement {
 	public render(): TemplateResult {
 		return html`
 				<span class="icon__container">
-					<nile-icon method="var(--nile-svg-method-stroke, var(--ng-svg-method-stroke))" size="16" name="${this.icon}"></nile-icon>
+					<nile-icon method="var(--nile-svg-method-stroke, var(--ng-svg-method-fill))" size="16" name="${this.icon}"></nile-icon>
 				</span>
 				<span class="hero__text">${this.heroText}</span>
 			`;

package/src/nile-rich-text-editor/nile-rich-text-editor.css.ts

@@ -201,6 +201,76 @@ nile-rich-text-editor[disabled] .editor a {
   pointer-events: none;
 }
 
+.editor figure.rte-image,
+nile-rte-preview figure.rte-image {
+  margin: 1em 0;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.editor > figure.rte-image:first-child,
+nile-rte-preview > figure.rte-image:first-child {
+  margin-top: 0;
+}
+
+.editor figure.rte-image[data-align='center'],
+nile-rte-preview figure.rte-image[data-align='center'] {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.editor figure.rte-image[data-align='right'],
+nile-rte-preview figure.rte-image[data-align='right'] {
+  margin-left: auto;
+}
+
+.editor figure.rte-image[data-align='justify'],
+nile-rte-preview figure.rte-image[data-align='justify'] {
+  width: 100%;
+}
+
+.editor figure.rte-image[data-align='justify'] img,
+nile-rte-preview figure.rte-image[data-align='justify'] img {
+  width: 100%;
+}
+
+.editor figure.rte-image img,
+nile-rte-preview figure.rte-image img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md));
+}
+
+.editor figure.rte-image figcaption,
+nile-rte-preview figure.rte-image figcaption {
+  margin-top: 6px;
+  font-size: 0.875em;
+  color: var(--nile-colors-neutral-600, var(--ng-colors-text-secondary));
+}
+
+.editor figure.rte-image {
+  cursor: pointer;
+}
+
+.editor figure.rte-image:hover img {
+  outline: 2px solid var(--nile-colors-primary-400, var(--ng-componentcolors-utility-blue-400));
+  outline-offset: 2px;
+}
+
+nile-rte-image nile-button.rte-image-button[data-active]::part(base) {
+  background-color: var(--nile-colors-primary-400, var(--ng-componentcolors-utility-blue-400));
+}
+
+nile-rte-image nile-button.rte-image-button[data-active]::part(base):hover {
+  background-color: var(--nile-colors-primary-500, var(--ng-componentcolors-utility-blue-500));
+}
+
+nile-rich-text-editor[disabled] .editor figure.rte-image {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .editor.empty::before {
   content: attr(data-placeholder);
   color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));

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

@@ -9,6 +9,7 @@ import './nile-rte-divider';
 import './nile-rte-preview';
 import './nile-rte-mentions';
 import './nile-rte-link';
+import './nile-rte-image';
 
 import {
   closestBlock,
@@ -135,6 +136,7 @@ export class NileRichTextEditor extends LitElement {
   private bgSwatchEl: HTMLElement | null = null;
   private containerEl: HTMLElement | null = null;
   private linkEl: HTMLElement | null = null;
+  private imageEl: HTMLElement | null = null;
 
   private mentionsEl: HTMLElement | null = null;
 
@@ -265,6 +267,9 @@ export class NileRichTextEditor extends LitElement {
       if (this.linkEl) {
         (this.linkEl as any).disabled = this.disabled;
       }
+      if (this.imageEl) {
+        (this.imageEl as any).disabled = this.disabled;
+      }
     }
     if (changed.has('placeholder') && this.editorEl) {
       if (this.placeholder) {
@@ -418,6 +423,13 @@ export class NileRichTextEditor extends LitElement {
       this.updateToolbarState();
     }
 
+    if (
+      (e.key === 'Backspace' || e.key === 'Delete') &&
+      this.handleFigureDeletion(e)
+    ) {
+      return;
+    }
+
     if (this.singleLineEditor && e.key === 'Enter') {
       e.preventDefault();
       return;
@@ -465,6 +477,61 @@ export class NileRichTextEditor extends LitElement {
     this.updateContent();
     this.updateToolbarState();
   };
+  private handleFigureDeletion(e: KeyboardEvent): boolean {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+    const range = sel.getRangeAt(0);
+    if (!this.editorEl.contains(range.commonAncestorContainer)) return false;
+
+    if (!range.collapsed) {
+      const figures = Array.from(
+        this.editorEl.querySelectorAll('figure.rte-image')
+      );
+      const touched = figures.filter(f => range.intersectsNode(f));
+      if (!touched.length) return false;
+
+      e.preventDefault();
+      range.deleteContents();
+      touched.forEach(f => f.isConnected && f.remove());
+      this.ensureAtLeastOneParagraph();
+      this.updateContent();
+      this.updateToolbarState();
+      return true;
+    }
+
+    const block =
+      closestBlock(range.startContainer, this.editorEl) || this.editorEl;
+
+    if (e.key === 'Backspace') {
+      const before = document.createRange();
+      before.setStart(block, 0);
+      before.setEnd(range.startContainer, range.startOffset);
+      const atStart = before.toString().replace(/\u200B/g, '') === '';
+      const prev = block.previousElementSibling;
+      if (atStart && prev?.matches?.('figure.rte-image')) {
+        e.preventDefault();
+        prev.remove();
+        this.updateContent();
+        this.updateToolbarState();
+        return true;
+      }
+    } else {
+      const after = document.createRange();
+      after.setStart(range.endContainer, range.endOffset);
+      after.setEnd(block, block.childNodes.length);
+      const atEnd = after.toString().replace(/\u200B/g, '') === '';
+      const next = block.nextElementSibling;
+      if (atEnd && next?.matches?.('figure.rte-image')) {
+        e.preventDefault();
+        next.remove();
+        this.updateContent();
+        this.updateToolbarState();
+        return true;
+      }
+    }
+
+    return false;
+  }
 
   private wireAuthoredToolbar(tb: HTMLElement) {
     this.buttonMap.clear();
@@ -496,6 +563,16 @@ export class NileRichTextEditor extends LitElement {
         });
         return;
       }
+      if (tag === 'nile-rte-image') {
+        (child as any).editorEl = this.editorEl;
+        (child as any).disabled = this.disabled;
+        this.imageEl = child as HTMLElement;
+        child.addEventListener('nile-image-changed', () => {
+          this.updateContent();
+          this.updateToolbarState();
+        });
+        return;
+      }
 
       if (tag === 'nile-rte-toolbar-item') {
         let btn = child.querySelector(
@@ -666,7 +743,8 @@ export class NileRichTextEditor extends LitElement {
     if (!el) return;
 
     const onlyWhitespace =
-      (el.textContent ?? '').replace(/\u200B/g, '').trim() === '';
+      (el.textContent ?? '').replace(/\u200B/g, '').trim() === '' &&
+      !el.querySelector('img');
     if (el.childNodes.length === 0 || onlyWhitespace) {
       el.innerHTML = '<p><br></p>';
       const p = el.querySelector('p');
@@ -684,7 +762,7 @@ export class NileRichTextEditor extends LitElement {
     }
 
     const hasBlock = el.querySelector(
-      'p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre'
+      'p,h1,h2,h3,h4,h5,h6,ul,ol,table,blockquote,pre,figure'
     );
     if (!hasBlock) {
       const p = document.createElement('p');
@@ -849,6 +927,12 @@ export class NileRichTextEditor extends LitElement {
       if (linkBtn) linkBtn.toggleAttribute('data-active', inLink);
     }
 
+    if (this.imageEl) {
+      const inImage = !!startElm.closest('figure.rte-image');
+      const imageBtn = this.imageEl.querySelector('nile-button');
+      if (imageBtn) imageBtn.toggleAttribute('data-active', inImage);
+    }
+
     this.setBtnActive(
       'left',
       alignNorm === 'left' &&
@@ -928,7 +1012,9 @@ export class NileRichTextEditor extends LitElement {
   private updateContent() {
     if (!this.editorEl) return;
     this.ensureAtLeastOneParagraph();
-    const isEmpty = (this.editorEl.textContent ?? '').trim() === '';
+    const isEmpty =
+      (this.editorEl.textContent ?? '').trim() === '' &&
+      !this.editorEl.querySelector('img');
     this.editorEl.classList.toggle('empty', isEmpty);
 
     const sel = window.getSelection();