@aquera/nile-elements 0.0.4-8 → 0.0.5-1

package/package.json

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

package/src/index.ts

@@ -30,3 +30,5 @@ export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
 export { NileLink} from './nile-link';
+export { NileRadioButton } from './nile-radio-button';
+export { NileRadioButtonGroup } from './nile-radio-button-group';

package/src/nile-error-message/nile-error-message.css.ts

@@ -12,76 +12,73 @@ import { css } from 'lit-element';
  */
 export const styles = css`
   :host {
-    width:100%;
   }
 
   .nile-error-message {
     width: 100%;
+    word-break: break-all;
     font-size: var(--nile-font-size-small);
+    letter-spacing: 0.2px;
     font-weight: var(--nile-font-weight-regular);
     line-height: var(--nile-font-size-small);
-    border: 1px solid var(--nile-colors-red-500);
-    border-left: 6px solid var(--nile-colors-red-500);
-    border-radius: var(--nile-radius-base-standard);
-    background: var(--nile-colors-red-100);
   }
 
-  .nile-error-message__info {
+  .nile-error-message__error {
     color: var(--nile-colors-red-500);
-    padding: 8px;
-    display: flex;
-    align-items: center;
+    word-break: break-word;
+  }
+
+  .nile-error-message__response {
+    color: var(--nile-colors-dark-500);
   }
 
-  .nile-error-message__icon,
-  .nile-error-message__arrow {
+  .nile-error-message__icon {
     vertical-align: middle;
-    margin-right: 6px;
-    transition: transform 0.3s ease-in-out;
+    margin-right:2px;
   }
 
-  .nile-error-message__expandable {
+  .nile-error-message__more-button {
+    color: var(--nile-colors-primary-600);
     cursor: pointer;
-    overflow: hidden;
+    word-break: break-word;
   }
 
-  .nile-error-message__content {
-    display: flex;
-    align-items: flex-start;
-    padding: 8px 12px;
+  .nile-error-message__response-expanded {
+    height: auto;
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
   }
 
-  .nile-error-message__expandable.bordered {
-    border-top: 1px solid var(--nile-colors-neutral-500);
+  .nile-error-message__response-expanded {
+    max-height: 100px;
+    overflow-y: auto;
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px;
+    background: var(--nile-colors-neutral-100);
+    transition: max-height 0.3s ease-in-out;
+    flex-shrink: 0;
   }
 
-  .nile-error-message__summary {
-    white-space: nowrap;
+  .nile-error-message__response-expanded.collapsed {
+    max-height: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
-    transition: height 0.3s ease-in-out, white-space 1s ease-in-out;
-    height: 14px;
-  }
-
-  .nile-error-message__expandable.expanded .nile-error-message__summary {
-    white-space: normal;
-    max-height: 6em;
-    overflow-y: scroll;
-  }
-
-  .nile-error-message__expandable.expanded
-    .nile-error-message__summary::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  .nile-error-message__expandable.expanded
-    .nile-error-message__summary::-webkit-scrollbar-thumb {
-    border-radius: 20px;
-    background: rgba(148, 159, 184, 0.25);
+    transition: max-height 0.3s ease-in-out;
+    visibility: hidden;
+    padding: 0 12px;
   }
 
-  .nile-error-message__expandable.expanded .nile-error-message__arrow {
-    transform: rotate(90deg);
+  .nile-error-message__response-expanded.expanded {
+    max-height: 100px;
+    transition: max-height 0.3s ease-in-out;
+    visibility: visible;
+    padding: 12px;
   }
 `;
 

package/src/nile-error-message/nile-error-message.ts

@@ -8,13 +8,6 @@ import {
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-error-message.css';
 
-const convertToStringArray = (value: any): Array<string> => {
-  if (Array.isArray(value)) {
-    return value.map(item => String(item));
-  }
-  return [];
-};
-
 /**
  * A custom error message component that displays error information to the user.
  * @customElement nile-error-message
@@ -25,100 +18,69 @@ export class NileErrorMessage extends LitElement {
     return [styles];
   }
 
-  @property({
-    type: Array,
-    attribute: 'error-messages',
-    hasChanged: (newVal, oldVal) =>
-      JSON.stringify(newVal) !== JSON.stringify(oldVal), // Optional: to detect deep changes
-    converter: {
-      toAttribute: value => JSON.stringify(value),
-      fromAttribute: value => convertToStringArray(JSON.parse(value || '[]')),
-    },
-  })
-  errorMessages: Array<string> = [];
+  // Represents the error message to be displayed to the user.
+  @property({ type: String })
+  errorMessage: string = '';
 
-  @property({ type: Number })
-  expandedIndex: number | null = null;
+  // Represents additional details about the error, like stack trace or other info.
+  @property({ type: String })
+  errorResponse: string;
 
-  expandText(index: number, target: any) {
-    const element = target.querySelector('.nile-error-message__summary');
-    const originalHeight = element.clientHeight;
-    element.style.whiteSpace = 'normal';
-    element.style.height = 'auto';
-    const expandedHeight = Math.min(element.clientHeight, 5.5 * 12);
+  @property({ type: Boolean })
+  isExpanded: boolean = false;
 
-    element.style.height = originalHeight + 'px';
+  // The maximum length before truncation.
+  private readonly MAX_LENGTH: number = 100;
 
-    requestAnimationFrame(() => {
-      element.style.height = expandedHeight + 'px';
-    });
+  /**
+   * Get a truncated version of the errorResponse if it's too long.
+   * @returns {string}
+   */
+  getTruncatedResponse(): string {
+    if (this.errorResponse.length > this.MAX_LENGTH) {
+      return `${this.errorResponse.substring(0, this.MAX_LENGTH)}...`;
+    }
+    return this.errorResponse;
   }
 
-  collapseText(target: any) {
-    const element = target.querySelector('.nile-error-message__summary');
-    const expandedHeight = element.clientHeight;
-    element.style.height = expandedHeight + 'px';
-
-    requestAnimationFrame(() => {
-      element.style.height = '14px';
-      element.style.whiteSpace = 'nowrap';
-    });
+  /**
+   * Toggle the expanded state of the error response.
+   */
+  toggleExpanded() {
+    this.isExpanded = !this.isExpanded;
   }
 
-  toggleExpand(index: number, event: any) {
-    if (this.shadowRoot) {
-      if (this.expandedIndex !== null && this.expandedIndex !== index) {
-        const prevExpandable = this.shadowRoot.querySelectorAll(
-          '.nile-error-message__expandable'
-        )[this.expandedIndex];
-        if (prevExpandable) {
-          this.collapseText(prevExpandable);
-        }
-      }
-    }
+  public render(): TemplateResult {
+    return html`
+      <div class="nile-error-message" part="base">
+        <nile-icon
+          name="info2"
+          size="14"
+          class="nile-error-message__icon"
+          part="icon"
+          color="#E5434D"
+        ></nile-icon>
+        <span class="nile-error-message__error">${this.errorMessage}</span>
 
-    if (this.expandedIndex === index) {
-      this.expandedIndex = null;
-      this.collapseText(event.currentTarget);
-    } else {
-      this.expandedIndex = index;
-      this.expandText(index, event.currentTarget);
-    }
-  }
 
-  render(): TemplateResult {
-    return html`
-      <div class="nile-error-message">
-        <div class="nile-error-message__info">
-          <nile-icon
-            name="info2"
-            size="14"
-            class="nile-error-message__icon"
-            part="icon"
-          ></nile-icon>
-          ${this.errorMessages.length}
-          ${this.errorMessages.length > 1 ? 'attributes' : 'attribute'} are not
-          valid
+        ${this.errorResponse
+          ? html` <span class="nile-error-message__response"
+                >${this.getTruncatedResponse()}</span
+              >
+              <span
+                class="nile-error-message__more-button"
+                @click=${this.toggleExpanded}
+                >${this.isExpanded ? 'View Less' : 'View More'}</span
+              >`
+          : ``}
+
+        <div
+          class="nile-error-message__response-expanded ${this.isExpanded
+            ? 'expanded'
+            : 'collapsed'}"
+        >
+          ${this.errorResponse}
         </div>
-        ${this.errorMessages.map(
-          (errorMessage, index) => html`
-            <div
-              class="nile-error-message__expandable ${index !== 0
-                ? 'bordered'
-                : ''} ${this.expandedIndex === index ? 'expanded' : ''}"
-              @click="${(event: any) => this.toggleExpand(index, event)}"
-            >
-              <div class="nile-error-message__content">
-                <nile-icon
-                  name="arrowright"
-                  size="14"
-                  class="nile-error-message__arrow"
-                ></nile-icon>
-                <div class="nile-error-message__summary">${errorMessage}</div>
-              </div>
-            </div>
-          `
-        )}
       </div>
     `;
   }

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

@@ -25,6 +25,7 @@ export const styles = css`
     gap: 8px;
     height: 38px;
     box-sizing: border-box;
+    cursor: pointer
   }
 
   .link__label {
@@ -42,6 +43,7 @@ export const styles = css`
     color: rgba(0, 94, 166, 0.5);
     cursor: not-allowed;
     opacity: 0.6;
+    pointer-events:none;
   }
 
   .link:not(.link--disabled):not(.link__button):hover {

package/src/nile-radio-button/index.ts

@@ -0,0 +1 @@
+export { NileRadioButton } from './nile-radio-button';

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

@@ -0,0 +1,175 @@
+/**
+ * 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 { css } from 'lit-element';
+
+/**
+ * RadioButton CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    color: var(--color-text-default, #000);
+    text-align: center;
+    border-radius: 4px;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px; /* 100% */
+    letter-spacing: 0.2px;
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 12px;
+    cursor: pointer;
+    gap: 10px;
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: var(--nile-focus-ring);
+    outline-offset: var(--nile-focus-ring-offset);
+  }
+
+  .button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* When disabled, prevent mouse events from bubbling up from children */
+  .button--disabled * {
+    pointer-events: none;
+  }
+
+  .button__prefix,
+  .button__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+
+  .button__label {
+    display: inline-block;
+  }
+
+  .button__label::slotted(nile-icon) {
+    vertical-align: -2px;
+  }
+
+  /* Default */
+  .button--default {
+    border: 1px solid #c7ced4;
+    background: #fff;
+    color: black;
+  }
+
+  .button--default:hover:not(.button--disabled) {
+    border: 1px solid #c7ced4;
+    background: #e5e9eb;
+  }
+
+  .button--default:active:not(.button--disabled) {
+    border: 1px solid #c7ced4;
+    background: #e5e9eb;
+  }
+
+  .button--checked {
+    border: 1px solid #c7ced4;
+    background: #e5e9eb;
+  }
+
+  .button--has-label.button--medium .button__label {
+    padding: 0 var(--nile-spacing-medium);
+  }
+
+  .button--has-prefix.button--medium {
+    padding-inline-start: var(--nile-spacing-small);
+  }
+
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--nile-spacing-small);
+  }
+
+  .button--has-suffix.button--medium,
+  .button--caret.button--medium {
+    padding-inline-end: var(--nile-spacing-small);
+  }
+
+  .button--has-suffix.button--medium .button__label,
+  .button--caret.button--medium .button__label {
+    padding-inline-end: var(--nile-spacing-small);
+  }
+
+  .nile-radio-button--first {
+    background-color: red;
+  }
+
+  :host(.nile-radio-button--first:not(.nile-radio-button--last)) .button {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :host(.nile-group-button--inner) .button {
+    border-radius: 0;
+  }
+
+  :host(.nile-radio-button--last:not(.nile-radio-button--first)) .button {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  /* All except the first */
+  :host(.nile-radio-button__button:not(.nile-radio-button__button--first)) {
+    margin-inline-start: calc(-1 * var(--nile-input-border-width));
+  }
+
+  :host(.nile-radio-button--inner) .button {
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+  }
+
+  .button__prefix,
+  .button__suffix,
+  .button__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+  }
+
+  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
+    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
+  .hidden-input {
+    all: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    outline: dotted 1px red;
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,151 @@
+/**
+ * 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 {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
+import { customElement, query, state } from 'lit/decorators.js';
+import { styles } from './nile-radio-button.css';
+import NileElement from '../internal/nile-element';
+import { HasSlotController } from '../slot';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { watch } from '../internal/watch';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-radio-button
+ *
+ */
+@customElement('nile-radio-button')
+export class NileRadioButton extends NileElement {
+  /**
+   * The styles for RadioButton
+   * @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];
+  }
+  private readonly hasSlotController = new HasSlotController(
+    this,
+    '[default]',
+    'prefix',
+    'suffix'
+  );
+
+  @query('.button') input: HTMLInputElement;
+  @query('.hidden-input') hiddenInput: HTMLInputElement;
+
+  @state() protected hasFocus = false;
+
+  /**
+   * @internal The radio button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
+   * it easier to style in button groups.
+   */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** The radio's value. When selected, the radio group will receive this value. */
+  @property() value: string;
+
+  /** Disables the radio button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
+   * this attribute can typically be omitted.
+   */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws a pill-style radio button with rounded edges. */
+  @property({ type: Boolean, reflect: true }) pill = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'presentation');
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('nile-blur');
+  }
+
+  private handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
+    this.checked = true;
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('nile-focus');
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  /** Sets focus on the radio button. */
+  focus(options?: FocusOptions) {
+    this.input.focus(options);
+  }
+
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? ' button--checked' : ''}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+            button: true,
+            'button--default': true,
+            'button--checked': this.checked,
+            'button--disabled': this.disabled,
+            'button--focused': this.hasFocus,
+            'button--has-label': this.hasSlotController.test('[default]'),
+            'button--has-prefix': this.hasSlotController.test('prefix'),
+            'button--has-suffix': this.hasSlotController.test('suffix'),
+          })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          tabindex="${this.checked ? '0' : '-1'}"
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+}
+
+export default NileRadioButton;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-radio-button': NileRadioButton;
+  }
+}

package/src/nile-radio-button-group/index.ts

@@ -0,0 +1 @@
+export { NileRadioButtonGroup } from './nile-radio-button-group';