@aquera/nile-elements 0.0.14 → 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.14",
+  "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-calendar/nile-calendar.css.ts

@@ -53,7 +53,6 @@ export const styles = css`
     line-height: 14px;
     letter-spacing: 0.2px;
     height: 50px;
-    margin-top: 10px;
   }
 
   .day-names,
@@ -98,7 +97,8 @@ export const styles = css`
     background: white;
     display: flex;
     justify-content: space-between;
-    width: auto;
+    width: 365px;
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
   .selected-date,
@@ -147,24 +147,24 @@ export const styles = css`
   .base {
     background-color: white;
     border-radius: 4px;
-    padding-bottom: 20px;
     width: 365px;
   }
 
   .base__range {
-    width: 730px;
+    padding: 24px;
   }
 
   .calender-input {
-    padding: 20px;
+    margin-top: 6px;
     padding-bottom: 0px;
-    background: white;
+    width: 365px;
   }
 
   .from {
     display: flex;
     justify-content: space-between;
-    gap: 20px;
+    gap: 8px;
+    margin-top: 12px;
   }
 
   .manual-input {
@@ -172,16 +172,18 @@ export const styles = css`
   }
 
   .manual-input-label {
+    color: #7f7f7f;
+    font-family: Colfax-regular;
     font-size: 12px;
-    font-style: normal;
     font-weight: 500;
-    margin-bottom: 10px;
+    line-height: 12px;
+    letter-spacing: 0.2px;
   }
 
   .button-contaner {
     width: 100%;
     text-align: right;
-    padding: 10px 0;
+    padding: 12px 0 0 0;
   }
 `;
 

package/src/nile-calendar/nile-calendar.ts

@@ -512,7 +512,7 @@ private handleEndTimeInput(event: CustomEvent): void {
 
     return html`
 
-        <div class="base${this.range ? '__range' : ''}">
+        <div class="base ${this.range ? 'base__range' : ''}">
           <div class="calendar-wrapper" >
             <div class="calendar-container ${this.range ? 'with-margin' : ''}">
               ${this.renderMonth(
@@ -521,7 +521,7 @@ private handleEndTimeInput(event: CustomEvent): void {
                 this.getDaysArray(this.currentYear, this.currentMonth)
               )}
             </div>
-            ${this.range
+            <!-- ${this.range
               ? html`
                   <div class="calendar-container">
                     ${this.renderMonth(
@@ -534,7 +534,7 @@ private handleEndTimeInput(event: CustomEvent): void {
                     )}
                   </div>
                 `
-              : ''}
+              : ''} -->
 
           </div>
           ${this.range

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>