@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/input/test/nr-input_test.ts

@@ -0,0 +1,163 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import { NrInputElement } from '../input.component';
+import { INPUT_STATE, INPUT_SIZE, INPUT_TYPE, EMPTY_STRING } from '../input.types';
+import '../input.component';
+import { HyIconElement } from '../../icon';
+suite('NrInputElement', () => {
+  test('default properties', async () => {
+    const el: NrInputElement = await fixture(html`<nr-input> </nr-input>`);
+    const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+    const input = el.shadowRoot!.querySelector('input')!;
+    const slot = el.shadowRoot!.querySelector('slot');
+    const assignedNode = slot!.assignedNodes();
+    expect(el.disabled).to.be.false;
+    expect(el.state).to.equal(INPUT_STATE.Default);
+    expect(el.value).to.equal(EMPTY_STRING);
+    expect(el.size).to.equal(INPUT_SIZE.Medium);
+    expect(el.type).to.equal(INPUT_TYPE.TEXT);
+    expect(el.placeholder).to.equal(EMPTY_STRING);
+    expect(el.min).to.be.undefined;
+    expect(el.max).to.be.undefined;
+    expect(el.step).to.be.undefined;
+
+    expect(input).to.not.have.attribute('min');
+    expect(input).to.not.have.attribute('max');
+    expect(input).to.not.have.attribute('step');
+    expect(input.disabled).to.be.false;
+    expect(input.type).to.equal(INPUT_TYPE.TEXT);
+    expect(input.value).to.equal(EMPTY_STRING);
+    expect(input.placeholder).to.equal(EMPTY_STRING);
+    expect(inputContainer).to.have.attribute('data-size', INPUT_SIZE.Medium);
+    expect(inputContainer.querySelector('#warning-icon')).to.be.null;
+    expect(inputContainer.querySelector('#error-icon')).to.be.null;
+    expect(inputContainer.querySelector('#password-icon')).to.be.null;
+    expect(inputContainer.querySelector('#number-icons')).to.be.null;
+    expect(assignedNode.length).to.equal(0);
+  });
+
+  test('input type password', async () => {
+    const el: NrInputElement = await fixture(html`<nr-input type="password"> </nr-input>`);
+    const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+    let passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;
+    expect(inputContainer.querySelector('#number-icons')).to.be.null;
+    expect(passwordIcon).to.exist;
+    expect(passwordIcon).to.have.attribute('name', 'eye');
+    passwordIcon.click();
+    await el.updateComplete;
+    expect(el.inputType).to.equal('text');
+    passwordIcon = inputContainer.querySelector('#password-icon')!;
+    expect(passwordIcon).to.have.attribute('name', 'eye-slash');
+  });
+
+  suite('input type number', () => {
+    test('init number input ', async () => {
+      const step = 5;
+      const min = 10;
+      const max = 100;
+      const el: NrInputElement = await fixture(
+        html`<nr-input type="number" step=${step} min=${min} max=${max}> </nr-input>`
+      );
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      const input = el.shadowRoot!.querySelector('input')!;
+      const passwordIcon: HyIconElement = inputContainer.querySelector('#password-icon')!;
+      const numberIcon = inputContainer.querySelector('#number-icons');
+      expect(passwordIcon).to.be.null;
+      expect(numberIcon).to.exist;
+      expect(input).to.have.attribute('min', min.toString());
+      expect(input).to.have.attribute('max', max.toString());
+      expect(input).to.have.attribute('step', step.toString());
+    });
+    test('increment number', async () => {
+      const step = 5;
+      const min = 10;
+      const el: NrInputElement = await fixture(html`<nr-input type="number" step=${step} min=${min}> </nr-input>`);
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      const input = el.shadowRoot!.querySelector('input')!;
+      const numberIcon = inputContainer.querySelector('#number-icons');
+      const plusButton: HyIconElement = numberIcon!.querySelector("[name='plus']")!;
+      plusButton.click();
+      expect(input.value).to.equal((min + step).toString());
+    });
+    test('decrement number', async () => {
+      const step = 5;
+      const el: NrInputElement = await fixture(html`<nr-input type="number" step=${step}> </nr-input>`);
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      const input = el.shadowRoot!.querySelector('input')!;
+      const inputValue = input.value;
+      const numberIcon = inputContainer.querySelector('#number-icons');
+      const minusButton: HyIconElement = numberIcon!.querySelector("[name='minus']")!;
+      minusButton.click();
+      expect(input.value).to.equal((+inputValue - step).toString());
+    });
+  });
+
+  suite('input with state', () => {
+    test('warning input', async () => {
+      const inputState = INPUT_STATE.Warning;
+      const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      expect(inputContainer.querySelector('#warning-icon')).to.exist;
+      expect(inputContainer.querySelector('#error-icon')).to.not.exist;
+    });
+    test('error input', async () => {
+      const inputState = INPUT_STATE.Error;
+      const el: NrInputElement = await fixture(html`<nr-input state=${inputState}> </nr-input>`);
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      expect(inputContainer.querySelector('#warning-icon')).to.not.exist;
+      expect(inputContainer.querySelector('#error-icon')).to.exist;
+    });
+  });
+  suite('input with size', () => {
+    test('large input', async () => {
+      const inputSize = INPUT_SIZE.Large;
+      const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      expect(inputContainer).to.have.attribute('data-size', inputSize);
+    });
+    test('medium input', async () => {
+      const inputSize = INPUT_SIZE.Medium;
+      const el: NrInputElement = await fixture(html`<nr-input size=${inputSize}> </nr-input>`);
+      const inputContainer = el.shadowRoot!.querySelector('#input-container')!;
+      expect(inputContainer).to.have.attribute('data-size', inputSize);
+    });
+  });
+  test('input with placeholder', async () => {
+    const placeholder = 'text of placeholder';
+    const el: NrInputElement = await fixture(html`<nr-input placeholder=${placeholder}> </nr-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    expect(input).to.have.attribute('placeholder', placeholder);
+  });
+
+  test('input with label', async () => {
+    const inputLabel = 'input label';
+    const el: NrInputElement = await fixture(html`<nr-input> <span slot="label">${inputLabel}</span> </nr-input>`);
+    const slot = el.shadowRoot!.querySelector('slot');
+    const assignedNode = slot!.assignedNodes();
+    expect(assignedNode[0]).to.have.attribute('slot', 'label');
+    expect(assignedNode[0].textContent).to.equal(inputLabel);
+  });
+
+  test('input with helper text', async () => {
+    const inputHelper = 'input helper';
+    const el: NrInputElement = await fixture(
+      html`<nr-input> <span slot="helper-text">${inputHelper}</span> </nr-input>`
+    );
+    const slot = el.shadowRoot!.querySelectorAll('slot');
+    const assignedNode = slot[1].assignedNodes();
+    expect(assignedNode[0]).to.have.attribute('slot', 'helper-text');
+    expect(assignedNode[0].textContent).to.equal(inputHelper);
+  });
+
+  test('input disabled', async () => {
+    const el: NrInputElement = await fixture(html`<nr-input disabled></nr-input>`);
+    const input = el.shadowRoot!.querySelector('input')!;
+    expect(input.disabled).to.be.true;
+    let inputFocus = false;
+    input.addEventListener('focus', () => {
+      inputFocus = true;
+    });
+    input.focus();
+
+    expect(inputFocus).to.equal(false);
+  });
+});

package/components/ui/nuraly-ui/src/components/input/utils/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+export { InputValidationUtils } from './input-validation.utils.js';
+export { InputRenderUtils } from './input-renderers.js';

package/components/ui/nuraly-ui/src/components/input/utils/input-renderers.ts

@@ -0,0 +1,217 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { html, TemplateResult, nothing } from 'lit';
+import { INPUT_TYPE, INPUT_STATE } from '../input.types.js';
+
+/**
+ * Rendering utilities for input component icons and elements
+ */
+export class InputRenderUtils {
+
+  /**
+   * Renders prefix slot content
+   */
+  static renderPrefix(): TemplateResult {
+    return html`
+      <div class="input-prefix">
+        <slot name="prefix"></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * Renders suffix slot content  
+   */
+  static renderSuffix(): TemplateResult {
+    return html`
+      <div class="input-suffix">
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * Renders addon before slot content (outside input borders)
+   * Only renders if hasAddonBefore is true
+   */
+  static renderAddonBefore(hasAddonBefore: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {
+    if (!hasAddonBefore) return nothing;
+    
+    return html`
+      <div class="input-addon-before">
+        <slot name="addon-before" @slotchange=${onSlotChange}></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * Renders addon after slot content (outside input borders)  
+   * Only renders if hasAddonAfter is true
+   */
+  static renderAddonAfter(hasAddonAfter: boolean, onSlotChange: (e: Event) => void): TemplateResult | typeof nothing {
+    if (!hasAddonAfter) return nothing;
+    
+    return html`
+      <div class="input-addon-after">
+        <slot name="addon-after" @slotchange=${onSlotChange}></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * Renders the copy icon when withCopy is enabled
+   */
+  static renderCopyIcon(
+    withCopy: boolean,
+    disabled: boolean,
+    readonly: boolean,
+    onCopy: () => void,
+    onKeydown: (e: KeyboardEvent) => void
+  ): TemplateResult | typeof nothing {
+    if (!withCopy) return nothing;
+    
+    return html`<nr-icon
+      name="copy"
+      type="regular"
+      id="copy-icon"
+      role="button"
+      aria-label="Copy input value"
+      tabindex="0"
+      @click=${!disabled && !readonly ? onCopy : nothing}
+      @keydown=${onKeydown}
+    ></nr-icon>`;
+  }
+
+  /**
+   * Renders the clear icon when allowClear is enabled and there's content
+   */
+  static renderClearIcon(
+    allowClear: boolean,
+    value: string,
+    disabled: boolean,
+    readonly: boolean,
+    onClear: () => void,
+    onKeydown: (e: KeyboardEvent) => void
+  ): TemplateResult | typeof nothing {
+    if (!allowClear || !value || disabled || readonly) return nothing;
+    
+    return html`<nr-icon
+      name="times-circle"
+      type="regular"
+      id="clear-icon"
+      role="button"
+      aria-label="Clear input value"
+      tabindex="0"
+      @click=${onClear}
+      @keydown=${onKeydown}
+    ></nr-icon>`;
+  }
+
+  /**
+   * Renders state-based icons (warning, error)
+   */
+  static renderStateIcon(state: string): TemplateResult | typeof nothing {
+    switch (state) {
+      case INPUT_STATE.Warning:
+        return html`<nr-icon name="warning" id="warning-icon"></nr-icon>`;
+      case INPUT_STATE.Error:
+        return html`<nr-icon name="exclamation-circle" id="error-icon"></nr-icon>`;
+      default:
+        return nothing;
+    }
+  }
+
+  /**
+   * Renders the calendar icon for calendar input type
+   */
+  static renderCalendarIcon(
+    state: string,
+    type: string
+  ): TemplateResult | typeof nothing {
+    if (state !== INPUT_STATE.Default || type !== INPUT_TYPE.CALENDAR) {
+      return nothing;
+    }
+    
+    return html`<nr-icon name="calendar" type="regular" id="calendar-icon"></nr-icon>`;
+  }
+
+  /**
+   * Renders password toggle icon
+   */
+  static renderPasswordIcon(
+    type: string,
+    inputType: string,
+    disabled: boolean,
+    readonly: boolean,
+    onToggle: () => void,
+    onKeydown: (e: KeyboardEvent) => void
+  ): TemplateResult | typeof nothing {
+    if (type !== INPUT_TYPE.PASSWORD) return nothing;
+    
+    if (inputType === INPUT_TYPE.TEXT) {
+      return html`<nr-icon
+        name="eye-slash"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Hide password"
+        tabindex="0"
+        @click=${!disabled && !readonly ? onToggle : nothing}
+        @keydown=${onKeydown}
+      ></nr-icon>`;
+    } else {
+      return html`<nr-icon
+        name="eye"
+        type="regular"
+        id="password-icon"
+        role="button"
+        aria-label="Show password"
+        tabindex="0"
+        @click=${!disabled && !readonly ? onToggle : nothing}
+        @keydown=${onKeydown}
+      ></nr-icon>`;
+    }
+  }
+
+  /**
+   * Renders number input increment/decrement icons
+   */
+  static renderNumberIcons(
+    type: string,
+    state: string,
+    disabled: boolean,
+    readonly: boolean,
+    onIncrement: () => void,
+    onDecrement: () => void,
+    onKeydown: (e: KeyboardEvent) => void
+  ): TemplateResult | typeof nothing {
+    if (type !== INPUT_TYPE.NUMBER) return nothing;
+    
+    return html`
+      <div id="number-icons">
+        ${state !== INPUT_STATE.Default ? html`<span id="icons-separator">|</span>` : nothing}
+        <nr-icon 
+          name="minus" 
+          aria-label="Decrease value"
+          role="button"
+          tabindex="0"
+          @click=${!disabled && !readonly ? onDecrement : nothing}
+          @keydown=${onKeydown}
+        ></nr-icon>
+        <span id="icons-separator">|</span>
+        <nr-icon 
+          name="plus" 
+          aria-label="Increase value"
+          role="button"
+          tabindex="0"
+          @click=${!disabled && !readonly ? onIncrement : nothing}
+          @keydown=${onKeydown}
+        ></nr-icon>
+      </div>
+    `;
+  }
+}

package/components/ui/nuraly-ui/src/components/input/utils/input-validation.utils.ts

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { INPUT_TYPE } from '../input.types.js';
+
+/**
+ * Validation utilities for input components
+ */
+export class InputValidationUtils {
+  
+  /**
+   * Validates numeric properties (min, max, step) to ensure they are valid numbers
+   */
+  static validateNumericProperties(
+    type: string,
+    min?: string,
+    max?: string,
+    step?: string
+  ): void {
+    if (type === INPUT_TYPE.NUMBER) {
+      if (min && isNaN(Number(min))) {
+        console.warn(`Invalid min value: "${min}" is not a valid number`);
+      }
+      if (max && isNaN(Number(max))) {
+        console.warn(`Invalid max value: "${max}" is not a valid number`);
+      }
+      if (step && isNaN(Number(step))) {
+        console.warn(`Invalid step value: "${step}" is not a valid number`);
+      }
+      if (min && max && Number(min) >= Number(max)) {
+        console.warn(`Invalid range: min value (${min}) should be less than max value (${max})`);
+      }
+    }
+  }
+
+  /**
+   * Prevents non-numeric characters from being typed in number inputs
+   */
+  static preventNonNumericInput(
+    keyDownEvent: KeyboardEvent,
+    min?: string
+  ): void {
+    const key = keyDownEvent.key;
+    const target = keyDownEvent.target as HTMLInputElement;
+    const currentValue = target.value;
+    const cursorPosition = target.selectionStart || 0;
+
+    // Allow control keys (backspace, delete, tab, escape, enter, arrow keys, etc.)
+    const allowedControlKeys = [
+      'Backspace', 'Delete', 'Tab', 'Escape', 'Enter',
+      'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
+      'Home', 'End', 'PageUp', 'PageDown'
+    ];
+
+    // Allow Ctrl/Cmd combinations (copy, paste, select all, etc.)
+    if (keyDownEvent.ctrlKey || keyDownEvent.metaKey) {
+      return;
+    }
+
+    // Allow control keys
+    if (allowedControlKeys.includes(key)) {
+      return;
+    }
+
+    // Allow digits
+    if (/^\d$/.test(key)) {
+      return;
+    }
+
+    // Allow decimal point (.) only once and allow it at the beginning for values like ".5"
+    if (key === '.' || key === ',') {
+      const hasDecimal = currentValue.includes('.') || currentValue.includes(',');
+      if (!hasDecimal) {
+        return;
+      }
+    }
+
+    // Allow minus sign (-) only at the beginning and if min allows negative numbers
+    if (key === '-') {
+      const hasMinusSign = currentValue.includes('-');
+      const minAllowsNegative = !min || Number(min) < 0;
+      if (!hasMinusSign && cursorPosition === 0 && minAllowsNegative) {
+        return;
+      }
+    }
+
+    // Allow plus sign (+) only at the beginning
+    if (key === '+') {
+      const hasPlusSign = currentValue.includes('+');
+      if (!hasPlusSign && cursorPosition === 0) {
+        return;
+      }
+    }
+
+    keyDownEvent.preventDefault();
+  }
+
+  /**
+   * Validates a numeric value against min/max constraints
+   */
+  static validateNumericValue(
+    value: string,
+    min?: string,
+    max?: string
+  ): { isValid: boolean; warnings: string[] } {
+    const warnings: string[] = [];
+    
+    if (!value) {
+      return { isValid: true, warnings };
+    }
+
+    const numericValue = Number(value);
+    
+    if (isNaN(numericValue)) {
+      return { 
+        isValid: false, 
+        warnings: [`Invalid numeric value: "${value}"`] 
+      };
+    }
+
+    if (min && numericValue < Number(min)) {
+      warnings.push(`Value ${numericValue} is below minimum ${min}`);
+    }
+    if (max && numericValue > Number(max)) {
+      warnings.push(`Value ${numericValue} is above maximum ${max}`);
+    }
+
+    return { isValid: true, warnings };
+  }
+}

package/components/ui/nuraly-ui/src/components/input/validation.ts

@@ -0,0 +1,3 @@
+export const PORT = /^(?:[1-9]\d{0,4}|[1-5]\d{5}|6[0-4]\d{4}|65[0-4]\d{3}|655[0-2]\d{2}|6553[0-5])$/
+
+export const NOT_EMPTY = /^.+$/;

package/components/ui/nuraly-ui/src/components/label/index.ts

@@ -0,0 +1 @@
+export * from './label.component.js';

package/components/ui/nuraly-ui/src/components/label/label.component.ts

@@ -0,0 +1,52 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import styles from "./label.style.js";
+import { LabelSize, LabelVariant } from './label.types.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+
+@customElement('nr-label')
+export class HyTextLabel extends NuralyUIBaseMixin(LitElement) {
+    static override styles = styles;
+
+    @property({ reflect: true })
+    size: LabelSize = 'medium';
+
+    @property({ reflect: true })
+    variant: LabelVariant = 'default';
+
+    @property({ type: Boolean, reflect: true })
+    required = false;
+
+    @property({ type: Boolean, reflect: true })
+    disabled = false;
+
+    @property()
+    for?: string;
+
+    @property()
+    value = '';
+
+    override connectedCallback() {
+        super.connectedCallback();
+        this.updateDataTheme();
+    }
+
+    override updated() {
+        this.updateDataTheme();
+    }
+
+   private updateDataTheme() {
+        if (!this.closest('[data-theme]')) {
+            this.setAttribute('data-theme', this.currentTheme);
+        }
+    }
+
+    override render() {
+        return html`
+            <label for=${this.for || ''}>
+                <slot></slot>
+                ${this.required ? html`<span class="required-asterisk">*</span>` : ''}
+            </label>
+        `;
+    }
+}