@dile/ui 2.18.2 → 2.19.0

package/components/copy-text/copy-text.js

@@ -0,0 +1,3 @@
+import { DileCopyText } from "./index.js";
+
+export { DileCopyText };

package/components/copy-text/index.js

@@ -0,0 +1,5 @@
+import { DileCopyText } from './src/DileCopyText.js';
+
+window.customElements.define('dile-copy-text', DileCopyText);
+
+export { DileCopyText };

package/components/copy-text/src/DileCopyText.js

@@ -0,0 +1,144 @@
+import { LitElement, html, css } from 'lit';
+import { contentCopyIcon } from '@dile/icons';
+import '../../floating-feedback/floating-feedback.js';
+
+export class DileCopyText extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      a {
+        cursor: pointer;
+        text-decoration: var(--dile-copy-text-text-decoration, none);
+        color: var(--dile-copy-text-color, inherit);
+        transition: all var(--dile-copy-text-transition-duration, 0.3s) ease;
+      }
+
+      a:hover {
+        color: var(--dile-copy-text-hover-color, #0066cc);
+        text-decoration: var(--dile-copy-text-hover-text-decoration, underline);
+      }
+
+      a:focus {
+        outline: var(--dile-copy-text-focus-outline, 2px solid #0066cc);
+        outline-offset: 2px;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      copy: { type: String },
+      copiedDuration: { type: Number },
+      feedbackText: { type: String },
+      hideIcon: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this.copy = '';
+    this.copiedDuration = 1000; // 2 seconds by default
+    this.feedbackText = 'Copied!';
+    this.hideIcon = false;
+  }
+
+  render() {
+    return html`
+      <dile-floating-feedback
+        id="copy-feedback"
+        feedback="${this.feedbackText}"
+        duration="${this.copiedDuration}"
+        ?hideIcon=${this.hideIcon}
+        .icon=${contentCopyIcon}
+      >
+        <a
+          href="#"
+          role="button"
+          tabindex="0"
+          @click="${this.handleCopy}"
+          @keydown="${this.handleKeydown}"
+        >
+          <slot></slot>
+        </a>
+      </dile-floating-feedback>
+    `;
+  }
+
+  handleCopy(e) {
+    e.preventDefault();
+    this.copyToClipboard();
+  }
+
+  handleKeydown(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.copyToClipboard();
+    }
+  }
+
+  async copyToClipboard() {
+    try {
+      // Try to use Clipboard API first (modern browsers)
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(this.copy);
+      } else {
+        // Fallback for older browsers
+        this.copyWithExecCommand();
+      }
+
+      // Dispatch custom event
+      this.dispatchEvent(
+        new CustomEvent('dile-text-copied', {
+          detail: { text: this.copy },
+          bubbles: true,
+          composed: true
+        })
+      );
+
+      // Show visual feedback
+      this.showCopiedFeedback();
+    } catch (error) {
+      console.error('Failed to copy text:', error);
+      // Try fallback if Clipboard API fails
+      try {
+        this.copyWithExecCommand();
+        this.dispatchEvent(
+          new CustomEvent('dile-text-copied', {
+            detail: { text: this.copy },
+            bubbles: true,
+            composed: true
+          })
+        );
+        this.showCopiedFeedback();
+      } catch (fallbackError) {
+        console.error('Fallback copy method also failed:', fallbackError);
+      }
+    }
+  }
+
+  copyWithExecCommand() {
+    const textArea = document.createElement('textarea');
+    textArea.value = this.copy;
+    textArea.style.position = 'fixed';
+    textArea.style.left = '-999999px';
+    textArea.style.top = '-999999px';
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+    const successful = document.execCommand('copy');
+    document.body.removeChild(textArea);
+    if (!successful) {
+      throw new Error('execCommand copy failed');
+    }
+  }
+
+  showCopiedFeedback() {
+    const feedback = this.shadowRoot.querySelector('#copy-feedback');
+    if (feedback) {
+      feedback.show();
+    }
+  }
+}

package/components/floating-feedback/floating-feedback.js

@@ -0,0 +1,3 @@
+import { DileFloatingFeedback } from "./index.js";
+
+export { DileFloatingFeedback };

package/components/floating-feedback/index.js

@@ -0,0 +1,5 @@
+import { DileFloatingFeedback } from './src/DileFloatingFeedback.js';
+
+window.customElements.define('dile-floating-feedback', DileFloatingFeedback);
+
+export { DileFloatingFeedback };

package/components/floating-feedback/src/DileFloatingFeedback.js

@@ -0,0 +1,203 @@
+import { LitElement, html, css } from 'lit';
+import '../../icon/icon.js';
+
+export class DileFloatingFeedback extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .feedback-anchor {
+        display: inline-block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      feedback: { type: String },
+      duration: { type: Number },
+      icon: { type: Object },
+      hideIcon: { type: Boolean }
+    };
+  }
+
+  constructor() {
+    super();
+    this.feedback = '';
+    this.duration = 1000;
+    this.icon = null;
+    this.hideIcon = false;
+    this.activeInstances = new Set();
+  }
+
+  render() {
+    return html`
+      <slot class="feedback-anchor"></slot>
+    `;
+  }
+
+  show(text) {
+    const feedbackText = text || this.feedback;
+    if (!feedbackText) {
+      console.warn('dile-floating-feedback: No text provided');
+      return;
+    }
+
+    this.createFloatingElement(feedbackText);
+  }
+
+  createFloatingElement(text) {
+    // Create instance ID and add to active set
+    const instanceId = Math.random();
+    this.activeInstances.add(instanceId);
+    
+    // Calculate delay based on number of active instances
+    const delay = (this.activeInstances.size - 1) * 50;
+
+    // Create the floating element
+    const floatingElement = document.createElement('div');
+    floatingElement.className = 'dile-floating-feedback-text';
+
+    // Get computed CSS variables from the component
+    const computedStyle = window.getComputedStyle(this);
+    const bgColor = computedStyle.getPropertyValue('--dile-floating-feedback-background-color').trim() || 'rgba(0, 0, 0, 0.8)';
+    const textColor = computedStyle.getPropertyValue('--dile-floating-feedback-text-color').trim() || '#fff';
+    const fontSize = computedStyle.getPropertyValue('--dile-floating-feedback-font-size').trim() || '0.875rem';
+    const fontWeight = computedStyle.getPropertyValue('--dile-floating-feedback-font-weight').trim() || '500';
+    const padding = computedStyle.getPropertyValue('--dile-floating-feedback-padding').trim() || '0.5rem 0.75rem';
+    const borderRadius = computedStyle.getPropertyValue('--dile-floating-feedback-border-radius').trim() || '4px';
+
+    // Style the floating element with computed values
+    Object.assign(floatingElement.style, {
+      position: 'fixed',
+      pointerEvents: 'none',
+      zIndex: '10000',
+      fontFamily: 'inherit',
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      backgroundColor: bgColor,
+      color: textColor,
+      padding: padding,
+      borderRadius: borderRadius,
+      animation: `dile-floating-feedback-animation ${this.duration}ms ease-out forwards`,
+      animationDelay: delay + 'ms'
+    });
+
+    // Create content container (flexbox if there's an icon)
+    const contentContainer = document.createElement('div');
+    if (!this.hideIcon && this.icon) {
+      Object.assign(contentContainer.style, {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        whiteSpace: 'nowrap'
+      });
+      
+      // Create and add icon element
+      const iconElement = document.createElement('dile-icon');
+      iconElement.icon = this.icon;
+      iconElement.style.setProperty('--dile-icon-size', 'var(--dile-floating-feedback-icon-size, 1.2em)');
+      iconElement.style.setProperty('--dile-icon-color', textColor);
+      contentContainer.appendChild(iconElement);
+    } else {
+      Object.assign(contentContainer.style, {
+        whiteSpace: 'nowrap'
+      });
+    }
+
+    // Create and add text element
+    const textSpan = document.createElement('span');
+    textSpan.textContent = text;
+    contentContainer.appendChild(textSpan);
+
+    // Add content container to floating element
+    floatingElement.appendChild(contentContainer);
+
+    // Calculate position relative to the slot's content
+    const anchorElement = this.children[0];
+    if (!anchorElement) {
+      console.warn('dile-floating-feedback: No element in slot to anchor to');
+      floatingElement.remove();
+      return;
+    }
+    
+    const rect = anchorElement.getBoundingClientRect();
+    const x = rect.left + rect.width / 2;
+    const y = rect.top;
+
+    floatingElement.style.left = (x - 50) + 'px'; // Center roughly
+    floatingElement.style.top = y + 'px';
+
+    // Add animation keyframes to document if not already present
+    this.ensureAnimationStyles();
+
+    // Add to document body
+    document.body.appendChild(floatingElement);
+
+    // Remove element after animation completes
+    const totalTime = this.duration + delay;
+    setTimeout(() => {
+      floatingElement.remove();
+      this.activeInstances.delete(instanceId);
+    }, totalTime);
+  }
+
+  ensureAnimationStyles() {
+    // Check if styles are already injected
+    if (document.getElementById('dile-floating-feedback-styles')) {
+      return;
+    }
+
+    const styleElement = document.createElement('style');
+    styleElement.id = 'dile-floating-feedback-styles';
+    styleElement.textContent = `
+      @keyframes dile-floating-feedback-animation {
+        0% {
+          opacity: 0;
+          transform: translateY(0) scale(0.8);
+        }
+        50% {
+          opacity: 1;
+          transform: translateY(-15px) scale(1);
+        }
+        100% {
+          opacity: 0;
+          transform: translateY(-30px) scale(1);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        @keyframes dile-floating-feedback-animation {
+          0% {
+            opacity: 0;
+            transform: translateY(0);
+          }
+          50% {
+            opacity: 1;
+            transform: translateY(0);
+          }
+          100% {
+            opacity: 0;
+            transform: translateY(0);
+          }
+        }
+      }
+
+      .dile-floating-feedback-text {
+        --dile-floating-feedback-duration: 1000ms;
+        --dile-floating-feedback-font-size: 0.875rem;
+        --dile-floating-feedback-font-weight: 500;
+        --dile-floating-feedback-color: #fff;
+        --dile-floating-feedback-background-color: rgba(0, 0, 0, 0.8);
+        --dile-floating-feedback-padding: 0.5rem 0.75rem;
+        --dile-floating-feedback-border-radius: 4px;
+        --dile-floating-feedback-translate-y: 30px;
+      }
+    `;
+
+    document.head.appendChild(styleElement);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "2.18.2",
+  "version": "2.19.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "scripts": {
@@ -20,11 +20,11 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/icons": "^2.4.2",
+    "@dile/icons": "^2.4.3",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2e660d50208c7a456bc593220121cad7f2885f9c"
+  "gitHead": "b66783df8f27b601e24de791acde3451d93dfe07"
 }

package/styles/colors.css

@@ -24,7 +24,7 @@
   --dile-on-primary-light-color: #303030;
   --dile-primary-dark-color: #d7d353;
   --dile-on-primary-dark-color: #303030;
-  --dile-secondary-light-color: #beed8e;
+  --dile-secondary-light-color: #d2f6ae;
   --dile-on-secondary-light-color: #303030;
   --dile-secondary-dark-color: #43842e;
   --dile-on-secondary-dark-color: #ffffff;