@aquera/nile-elements 1.5.4 → 1.5.6

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

@@ -0,0 +1,431 @@
+/**
+ * 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.
+ */
+
+import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles } from './nile-qr-code.css.js';
+import { generateQR, ErrorCorrectionLevel } from './nile-qr-code-utils.js';
+import NileElement from '../internal/nile-element.js';
+
+/**
+ * Nile QR Code component.
+ *
+ 
+ * @tag nile-qr-code
+ *
+ * @csspart base - The canvas element used to draw the QR code.
+ *
+ * @fires nile-qr-image-error - Emitted when the center image fails to load.
+ *
+ * @example
+ 
+ *
+ 
+ */
+@customElement('nile-qr-code')
+export class NileQrCode extends NileElement {
+
+  /**
+   * The styles for QR Code.
+   * @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];
+  }
+
+  // -------------------------------------------------------------------------
+  // Properties
+  // -------------------------------------------------------------------------
+
+  /**
+   * The QR code's value — the text or URL to encode.
+   */
+  @property({ type: String, reflect: true })
+  value = '';
+
+  /**
+   * The size of the QR code, in pixels.
+   */
+  @property({ type: Number, reflect: true })
+  size = 128;
+
+  /**
+   * The fill color. This can be any valid CSS color, but not a CSS custom property.
+   */
+  @property({ type: String, reflect: true })
+  fill = 'black';
+
+  /**
+   * The background color. This can be any valid CSS color or `'transparent'`.
+   * It cannot be a CSS custom property.
+   */
+  @property({ type: String, reflect: true })
+  background = 'white';
+
+  /**
+   * The edge radius of each module. Must be between 0 and 0.5.
+   * Use this to create a rounded effect.
+   */
+  @property({ type: Number, reflect: true })
+  radius = 0;
+
+  /**
+   * The level of error correction to use.
+   * - `'L'` — Low (~7%)
+   * - `'M'` — Medium (~15%)
+   * - `'Q'` — Quartile (~25%)
+   * - `'H'` — High (~30%)
+   *
+   * When using an image overlay, `'H'` is recommended so the QR remains scannable.
+   */
+  @property({ attribute: 'error-correction', reflect: true })
+  errorCorrection: ErrorCorrectionLevel = 'H';
+
+  /**
+   * The label for assistive devices to announce.
+   * If unspecified, the `value` will be used instead.
+   */
+  @property({ type: String, reflect: true })
+  label = '';
+
+  /**
+   * URL of an image to overlay in the center of the QR code (e.g. a logo).
+   * The image is drawn on top of the QR modules, so use `error-correction="H"`
+   * to ensure the code remains scannable.
+   */
+  @property({ type: String, reflect: true })
+  image = '';
+
+  /**
+   * Size of the center image as a fraction of the overall QR code size
+   * (0.1 – 0.4). Defaults to 0.25 (25% of the QR code).
+   */
+  @property({ attribute: 'image-size', type: Number, reflect: true })
+  imageSize = 0.25;
+
+  /**
+   * Padding around the center image in pixels. Creates a clear area
+   * between the image and the surrounding QR modules.
+   */
+  @property({ attribute: 'image-padding', type: Number, reflect: true })
+  imagePadding = 4;
+
+  /**
+   * Optional border radius for the center image in pixels.
+   * Set to a high value for a circular mask.
+   */
+  @property({ attribute: 'image-radius', type: Number, reflect: true })
+  imageRadius = 4;
+
+  /**
+   * Apply a linear gradient to the QR modules instead of a flat color.
+   * Format: `"direction, color1, color2[, ...]"` where direction is an
+   * angle in degrees (e.g. `"135, #6366f1, #ec4899"`).
+   * When set, this overrides the `fill` property for module rendering.
+   */
+  @property({ attribute: 'fill-gradient', type: String, reflect: true })
+  fillGradient = '';
+
+  // -------------------------------------------------------------------------
+  // Internal state
+  // -------------------------------------------------------------------------
+
+  private _loadedImage: HTMLImageElement | null = null;
+
+  private _imageLoadPromise: Promise<void> | null = null;
+
+  // -------------------------------------------------------------------------
+  // Refs
+  // -------------------------------------------------------------------------
+
+  @query('canvas')
+  private canvas!: HTMLCanvasElement;
+
+  // -------------------------------------------------------------------------
+  // Lifecycle
+  // -------------------------------------------------------------------------
+
+  protected override updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('image')) {
+      this._loadedImage = null;
+      this._imageLoadPromise = null;
+      if (this.image) {
+        this.loadImage(this.image);
+        return;
+      }
+    }
+
+    const relevantProps: (keyof NileQrCode)[] = [
+      'value', 'size', 'fill', 'background', 'radius', 'errorCorrection',
+      'imageSize', 'imagePadding', 'imageRadius', 'fillGradient',
+    ];
+
+    const needsRedraw = relevantProps.some(p => changedProperties.has(p));
+    if (needsRedraw) {
+      this.drawQrCode();
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Rendering
+  // -------------------------------------------------------------------------
+
+  public render(): TemplateResult {
+    const ariaLabel = this.label || this.value || 'QR Code';
+
+    return html`
+      <canvas
+        part="base"
+        role="img"
+        aria-label=${ariaLabel}
+        width=${this.size}
+        height=${this.size}
+      ></canvas>
+    `;
+  }
+
+  // -------------------------------------------------------------------------
+  // Public methods
+  // -------------------------------------------------------------------------
+
+  /**
+   * Downloads the QR code as a PNG image.
+   * @param filename - The name of the downloaded file (defaults to `'qr-code.png'`).
+   */
+  public download(filename = 'qr-code.png'): void {
+    if (!this.canvas) return;
+    const link = document.createElement('a');
+    link.download = filename;
+    link.href = this.canvas.toDataURL('image/png');
+    link.click();
+  }
+
+  /**
+   * Returns the QR code canvas content as a data URL.
+   * @param type - MIME type (defaults to `'image/png'`).
+   */
+  public toDataURL(type = 'image/png'): string {
+    if (!this.canvas) return '';
+    return this.canvas.toDataURL(type);
+  }
+
+  // -------------------------------------------------------------------------
+  // Private methods
+  // -------------------------------------------------------------------------
+
+  private loadImage(src: string): void {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+
+    this._imageLoadPromise = new Promise<void>((resolve) => {
+      img.onload = () => {
+        this._loadedImage = img;
+        this._imageLoadPromise = null;
+        this.drawQrCode();
+        resolve();
+      };
+      img.onerror = () => {
+        this._loadedImage = null;
+        this._imageLoadPromise = null;
+        this.emit('nile-qr-image-error', { src });
+        this.drawQrCode();
+        resolve();
+      };
+    });
+
+    img.src = src;
+  }
+
+  private drawQrCode(): void {
+    if (!this.canvas) return;
+
+    const ctx = this.canvas.getContext('2d');
+    if (!ctx) return;
+
+    const { size, fill, background, radius: rawRadius, errorCorrection, value } = this;
+
+    const clampedRadius = Math.max(0, Math.min(0.5, rawRadius));
+
+    const matrix = generateQR(value, errorCorrection);
+    const moduleCount = matrix.length;
+    const moduleSize = size / moduleCount;
+
+    ctx.clearRect(0, 0, size, size);
+
+    if (background && background !== 'transparent') {
+      ctx.fillStyle = background;
+      ctx.fillRect(0, 0, size, size);
+    }
+
+    const imgFraction = Math.max(0.1, Math.min(0.4, this.imageSize));
+    const imgPixelSize = this._loadedImage ? size * imgFraction : 0;
+    const padTotal = this._loadedImage ? this.imagePadding * 2 : 0;
+    const exclusionSize = imgPixelSize + padTotal;
+    const exclusionStart = (size - exclusionSize) / 2;
+    const exclusionEnd = exclusionStart + exclusionSize;
+
+    const useFill = this.resolveModuleFill(ctx, size);
+    ctx.fillStyle = useFill;
+
+    for (let row = 0; row < moduleCount; row++) {
+      for (let col = 0; col < moduleCount; col++) {
+        if (matrix[row][col] !== 1) continue;
+
+        const x = col * moduleSize;
+        const y = row * moduleSize;
+
+        if (this._loadedImage) {
+          const modRight = x + moduleSize;
+          const modBottom = y + moduleSize;
+          if (x >= exclusionStart && modRight <= exclusionEnd &&
+              y >= exclusionStart && modBottom <= exclusionEnd) {
+            continue;
+          }
+        }
+
+        if (clampedRadius > 0) {
+          this.drawRoundedModule(ctx, x, y, moduleSize, moduleSize, clampedRadius * moduleSize);
+        } else {
+          ctx.fillRect(x, y, moduleSize, moduleSize);
+        }
+      }
+    }
+
+    if (this._loadedImage) {
+      this.drawCenterImage(ctx, size, imgPixelSize);
+    }
+  }
+
+  /**
+   * Returns the fill style for QR modules — either a gradient or the flat fill color.
+   */
+  private resolveModuleFill(ctx: CanvasRenderingContext2D, size: number): string | CanvasGradient {
+    if (!this.fillGradient) return this.fill;
+
+    const parts = this.fillGradient.split(',').map(s => s.trim());
+    if (parts.length < 3) return this.fill;
+
+    const angleDeg = parseFloat(parts[0]);
+    if (Number.isNaN(angleDeg)) return this.fill;
+
+    const angleRad = (angleDeg * Math.PI) / 180;
+    const cx = size / 2;
+    const cy = size / 2;
+    const len = size / 2;
+    const x0 = cx - Math.cos(angleRad) * len;
+    const y0 = cy - Math.sin(angleRad) * len;
+    const x1 = cx + Math.cos(angleRad) * len;
+    const y1 = cy + Math.sin(angleRad) * len;
+
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    const colors = parts.slice(1);
+    for (let i = 0; i < colors.length; i++) {
+      gradient.addColorStop(i / (colors.length - 1), colors[i]);
+    }
+    return gradient;
+  }
+
+  private drawCenterImage(ctx: CanvasRenderingContext2D, size: number, imgPixelSize: number): void {
+    if (!this._loadedImage) return;
+
+    const x = (size - imgPixelSize) / 2;
+    const y = (size - imgPixelSize) / 2;
+    const r = Math.min(this.imageRadius, imgPixelSize / 2);
+
+    const pad = this.imagePadding;
+    if (pad > 0 && this.background && this.background !== 'transparent') {
+      ctx.fillStyle = this.background;
+      const bx = x - pad;
+      const by = y - pad;
+      const bw = imgPixelSize + pad * 2;
+      const bh = imgPixelSize + pad * 2;
+      const br = r + pad * 0.5;
+      this.drawRoundedRect(ctx, bx, by, bw, bh, br);
+      ctx.fill();
+    }
+
+    ctx.save();
+    this.clipRoundedRect(ctx, x, y, imgPixelSize, imgPixelSize, r);
+    ctx.drawImage(this._loadedImage, x, y, imgPixelSize, imgPixelSize);
+    ctx.restore();
+  }
+
+  private drawRoundedModule(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    r: number
+  ): void {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  private drawRoundedRect(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    r: number
+  ): void {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+  }
+
+  private clipRoundedRect(
+    ctx: CanvasRenderingContext2D,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    r: number
+  ): void {
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + w - r, y);
+    ctx.arcTo(x + w, y, x + w, y + r, r);
+    ctx.lineTo(x + w, y + h - r);
+    ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+    ctx.lineTo(x + r, y + h);
+    ctx.arcTo(x, y + h, x, y + h - r, r);
+    ctx.lineTo(x, y + r);
+    ctx.arcTo(x, y, x + r, y, r);
+    ctx.closePath();
+    ctx.clip();
+  }
+}
+
+export default NileQrCode;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-qr-code': NileQrCode;
+  }
+}

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

@@ -115,7 +115,7 @@ export const styles = css`
 
   /* Disabled */
   .radio--disabled {
-    opacity: 0.5;
+    
     cursor: not-allowed;
   }
 

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

@@ -20,7 +20,7 @@ export const styles = css`
   }
 
  
-.rte-container nile-rte-toolbar {
+  .rte-container nile-rte-toolbar {
   display: flex;
   align-items: center;
   gap: 6px;
@@ -28,12 +28,10 @@ export const styles = css`
   border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   border-radius: 8px 8px 0 0;
-
   width: 100%;            
   box-sizing: border-box; 
 }
 
-
   .rte-container .editor {
     min-height: 160px;
     width: 100%;
@@ -48,7 +46,23 @@ export const styles = css`
     border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
   }
 
- 
+  nile-rich-text-editor[disabled] .rte-container {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    cursor: not-allowed !important;
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  }
+
+  nile-rich-text-editor[disabled] .rte-container nile-rte-toolbar {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+    cursor: not-allowed !important;
+  }  
+
+  nile-rich-text-editor[disabled] .rte-container .editor {
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    pointer-events: none ;
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+  }
+
 nile-rte-preview {
   display: block;
   width: 100%;
@@ -61,7 +75,11 @@ nile-rte-preview {
   word-wrap: break-word;
 }
 
-
+  nile-rich-text-editor[disabled] nile-rte-preview {
+  background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+  cursor: not-allowed ;
+  border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
+}
 
   nile-rte-toolbar-item nile-button::part(base) {
     width: 32px;
@@ -85,7 +103,6 @@ nile-rte-preview {
     background: var(--nile-colors-white-base);
   }
 
- 
   .editor p { margin: 1em 0; }
   .editor h1, .preview h1 {
     font-size: 2em;
@@ -160,6 +177,8 @@ nile-rte-toolbar-item nile-button[data-active]::part(base):hover {
   opacity: 0.7;
 }
 
+
+
  
 
 

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

@@ -66,6 +66,7 @@ export class NileRichTextEditor extends LitElement {
 
   @property({ type: String, attribute: true, reflect: true }) value = '';
   @property({ type: Boolean, attribute: true, reflect: true }) noStyles = false;
+  @property({ type: Boolean, attribute: true, reflect: true }) disabled = false;    
   @property({ type: Boolean, attribute: 'singlelineeditor', reflect: true }) singleLineEditor =
     false;
     @property({ type: String }) placeholder = '';
@@ -245,6 +246,7 @@ export class NileRichTextEditor extends LitElement {
         this.previewEl.classList.toggle('single-line', this.singleLineEditor);
       }
     }
+  
   }
 
   private ensureEditor() {
@@ -407,6 +409,7 @@ export class NileRichTextEditor extends LitElement {
       const tag = child.tagName.toLowerCase();
 
       if (tag === 'nile-rte-select' && child.getAttribute('type') === 'align') {
+        (child as any).disabled = this.disabled;
         child.addEventListener('change', (e: any) => {
           this.focusAndRestore();
           const alignment = e.detail as 'left' | 'center' | 'right' | 'justify';
@@ -440,14 +443,15 @@ export class NileRichTextEditor extends LitElement {
           (btn as any).variant = 'tertiary';
           (btn as any).size = 'small';
         }
+        (btn as any).disabled = this.disabled;
 
         if (iconAttr) {
-          btn.innerHTML = `<nile-icon name="${iconAttr}" aria-label="${label}"></nile-icon>`;
+          btn.innerHTML = `<nile-icon name="${iconAttr}" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} aria-label="${label}"></nile-icon>`;
           child.innerHTML = '';
         } else if (!authoredHasContent) {
           const defaultIcon = DEFAULT_ICONS[cmd];
           if (defaultIcon) {
-            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color="black" aria-label="${label}"></nile-icon>`;
+            btn.innerHTML = `<nile-icon name="${defaultIcon}" size="20" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} aria-label="${label}"></nile-icon>`;
           } else {
             btn.textContent = label || cmd;
           }
@@ -458,10 +462,14 @@ export class NileRichTextEditor extends LitElement {
         }
 
         if (!btn.isConnected) {
-          const tooltip = document.createElement('nile-lite-tooltip');
-          tooltip.setAttribute('content', label);
-          tooltip.appendChild(btn);
-          child.appendChild(tooltip);
+          if (this.disabled) {
+            child.appendChild(btn);
+          } else {
+            const tooltip = document.createElement('nile-lite-tooltip');
+            tooltip.setAttribute('content', label);
+            tooltip.appendChild(btn);
+            child.appendChild(tooltip);
+          }
         }
 
         btn.setAttribute('aria-label', label);

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

@@ -35,6 +35,8 @@ export class NileRteSelect extends LitElement {
 
   @property({ type: String, attribute: true, reflect: true }) label = '';
 
+  @property({ type: Boolean, attribute: true, reflect: true }) disabled = false;
+
   @state() private selectedValue = '';
 
   private mapAlignIcon(v: string) {
@@ -155,15 +157,16 @@ export class NileRteSelect extends LitElement {
 
     if (this.type === 'align') {
       const trigger = current?.icon
-        ? html`<nile-icon name="${current.icon}"></nile-icon>`
+        ? html`<nile-icon name="${current.icon}" color=${this.disabled ? 'var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))' : 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))'} size="20"></nile-icon>`
         : this.label || 'Align';
 
       return html`
-        <nile-dropdown class="rte-align-dd">
+        <nile-dropdown ?disabled=${this.disabled} class="rte-align-dd">
           <nile-button
             slot="trigger"
             variant="tertiary"
             class="rte-align-trigger"
+            ?disabled=${this.disabled}
           >
             ${trigger}
           </nile-button>

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

@@ -126,7 +126,7 @@ export const styles = css`
   .select__display-input {
     position: relative;
     width: 100%;
-    font: var(--nile-font-family-inherit, var(--ng-font-weight-regular));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     border: none;
     background: none;
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
@@ -136,6 +136,7 @@ export const styles = css`
     margin: var(--nile-spacing-none, var(--ng-spacing-none));
     -webkit-appearance: none;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
   }
 
 
@@ -144,6 +145,9 @@ export const styles = css`
     color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
   }
+  .select--disabled.select--placeholder-visible .select__display-input::placeholder {
+    color: var(--nile-colors-dark-500,var(--ng-color-graylightmode-500));
+  }
 
   .select:not(.select--disabled):hover .select__display-input {
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
@@ -229,10 +233,9 @@ export const styles = css`
   }
 
   .select--standard.select--disabled .select__combobox {
-    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
+    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
     border-color: var(--nile-colors-neutral-500,var(--ng-colors-border-disabled) );
     color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
-    opacity: var(--nile-opacity-50, var(--ng-opacity-100));
     cursor: not-allowed;
     outline: none;
   }
@@ -283,7 +286,7 @@ export const styles = css`
 
   .select--medium .select__combobox {
     border-radius: var(--nile-radius-sm, var(--ng-radius-md));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
 
     padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
     height: var(--nile-height-40px, var(--ng-height-40px));

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -146,6 +146,10 @@ export default css`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-disabled));
+  }
+  .nile-slide--disabled {
+   cursor: not-allowed;
   }
+
 `;