@aquera/nile-elements 0.0.15 → 0.0.16

package/package.json

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

package/src/index.ts

@@ -35,3 +35,4 @@ export { NileButtonToggle } from './nile-button-toggle';
 export { NileSwitcher } from './nile-switcher';
 export { NileContentEditor } from './nile-content-editor';
 export { NileDialog } from './nile-dialog';
+export { NileErrorNotification } from './nile-error-notification';

package/src/nile-error-notification/index.ts

@@ -0,0 +1 @@
+export { NileErrorNotification } from './nile-error-notification';

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

@@ -0,0 +1,39 @@
+/**
+ * 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';
+
+/**
+ * ErrorNotification CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .nile-error-notification {
+    font-family: Colfax-regular;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+    letter-spacing: 0.2px;
+    border: 1px solid var(--nile-colors-red-500);
+    border-left: 6px solid var(--nile-colors-red-500);
+    border-radius: 4px;
+    padding: 8px;
+    background: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-red-500);
+    box-sizing: border-box;
+  }
+
+  .nile-error-notification__icon {
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,70 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-error-notification.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-error-notification
+ *
+ */
+@customElement('nile-error-notification')
+export class NileErrorNotification extends LitElement {
+  /**
+   * The styles for ErrorNotification
+   * @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];
+  }
+
+  // Represents the error message to be displayed to the user.
+  @property({ type: String })
+  errorMessage: string = '';
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html`
+      <div class="nile-error-notification">
+        <nile-icon
+          name="info2"
+          size="14"
+          class="nile-error-notification__icon"
+          part="icon"
+          color="#E5434D"
+        ></nile-icon>
+        ${this.errorMessage}
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileErrorNotification;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-error-notification': NileErrorNotification;
+  }
+}

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

@@ -693,8 +693,8 @@ export class NileSelect extends NileElement implements NileFormControl {
         this.displayLabel = this.selectedOptions.length + ' selected';
       }
     } else {
-      this.value = this.selectedOptions[0]?.value ?? '';
-      this.displayLabel = this.selectedOptions[0]?.getTextLabel() ?? '';
+      this.value = this.selectedOptions[0]?.value ?? this.value;
+      this.displayLabel = this.selectedOptions[0]?.getTextLabel() ? this.selectedOptions[0].getTextLabel() : (this.value ?? '');
     }
 
     // Update validity
@@ -1105,7 +1105,6 @@ export class NileSelect extends NileElement implements NileFormControl {
                       placeholder="Search..."
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
-                      @nile-blur=${this.handleSearchBlur}
                       @nile-change="${this.onInputChange}"
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>