@aquera/nile-elements 0.0.2 → 0.0.3-2

package/package.json

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

package/src/index.ts

@@ -24,4 +24,7 @@ export { NileDropdown } from './nile-dropdown';
 export { NileAutoComplete } from './nile-auto-complete';
 export { NileChip } from './nile-chip';
 export { NileTextarea } from './nile-textarea';
+export { NileDatePicker } from './nile-date-picker';
 export { NileErrorMessage } from './nile-error-message';
+export { NileFormErrorMessage } from './nile-form-error-message';
+export { NileFormHelpText } from './nile-form-help-text';

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

@@ -7,7 +7,7 @@ import { html, literal } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { watch } from '../internal/watch';
 import { styles } from './nile-button.css';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, TemplateResult } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import NileElement from '../internal/nile-element';
 
@@ -275,7 +275,7 @@ export class NileButton extends NileElement implements NileFormControl {
     }
   }
 
-  render() {
+  render(): TemplateResult {
     const isLink = this.isLink();
     const tag = isLink ? literal`a` : literal`button`;
 

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

@@ -100,12 +100,16 @@ export const styles = css`
 
   .checkbox__label {
     display: inline-block;
-    color: var(--nile-type-scale-3);
     line-height: 14px;
     font-size: 14px;
     margin-inline-start: 0.5em;
     user-select: none;
     margin-top: 2px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.2px;
   }
 
   :host([required]) .checkbox__label::after {

package/src/nile-checkbox/nile-checkbox.ts

@@ -82,7 +82,7 @@ export class NileCheckbox extends NileElement {
   @property({ type: Boolean, reflect: true }) checked = false;
 
   /** Label, declared this property for backward compatibility of old component  */
-  @property({ type: Boolean, reflect: true }) label = '';
+  @property({ type: String, reflect: true }) label = '';
 
   /**
    * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
@@ -93,6 +93,10 @@ export class NileCheckbox extends NileElement {
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue('checked') defaultChecked = false;
 
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
   /**
    * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
    * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
@@ -154,6 +158,9 @@ export class NileCheckbox extends NileElement {
 
 
   render() {
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
+
     return html`
       <label
         part="base"
@@ -224,6 +231,24 @@ export class NileCheckbox extends NileElement {
           <slot></slot>
         </div>
       </label>
+
+      ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
     `;
   }
 }

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

@@ -37,19 +37,18 @@ export const styles = css`
   .form-control--has-label .form-control__label {
     display: inline-block;
     color: inherit;
-    margin-bottom: 0.125rem;
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: 0.875rem;
+    margin-bottom: 12px;
+    color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 1rem;
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: 1.25rem;
+    font-size: 14px;
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
@@ -92,7 +91,6 @@ export const styles = css`
     background-color: #fff;
     border-radius: 0.25rem;
     border: solid 1px #c7ced4;
-    padding: 5px 10px;
     display: flex;
     flex-wrap: wrap;
     width: 100%;

package/src/nile-chip/nile-chip.ts

@@ -73,9 +73,6 @@ export class NileChip extends NileElement {
   /** Disables the input. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */
-  @property({ attribute: 'help-text' }) helpText = '';
-
   // Auto-complete options
   @property({ type: Array }) autoCompleteOptions: any[] = [];
 
@@ -85,6 +82,13 @@ export class NileChip extends NileElement {
 
   @property({ type: Boolean }) noWrap: boolean = false;
 
+  @property({ type: Array }) errorIndexes: number[] = [];
+
+  @property({ attribute: 'help-text' }) helpText = '';
+
+  @property({ attribute: 'error-message' }) errorMessage = '';
+
+
   @watch('autoCompleteOptions')
   onAutoCompleteOptionsChanged() {
     this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
@@ -186,7 +190,9 @@ export class NileChip extends NileElement {
 
     // Check if label and help text are present
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+
+    const hasHelpText = this.helpText ? true : false;
+    const hasErrorMessage = this.errorMessage ? true : false;
 
     return html`
       <div
@@ -218,9 +224,12 @@ export class NileChip extends NileElement {
           })}
         >
           ${this.tags.map(
-            tag => html`
+            (tag, index) => html`
               <nile-tag
-                class="nile-chip__tags"
+                class=${classMap({
+                  'nile-chip__tags': true,
+                })}
+                .variant=${this.errorIndexes.includes(index) ? 'error' : 'normal'}
                 @nile-remove=${() => this.handleRemove(tag)}
                 removable
                 pill
@@ -253,6 +262,23 @@ export class NileChip extends NileElement {
             ${this.helpText}
           </slot>
         </div>
+        ${
+          hasHelpText
+            ? html`
+                <nile-form-help-text>${this.helpText}</nile-form-help-text>
+              `
+            : ``
+        }
+
+        ${
+          hasErrorMessage
+            ? html`
+                <nile-form-error-message
+                  >${this.errorMessage}</nile-form-error-message
+                >
+              `
+            : ``
+        }
       </div>
     `;
   }

package/src/nile-date-picker/index.ts

@@ -0,0 +1 @@
+export { NileDatePicker } from './nile-date-picker';

package/src/nile-date-picker/nile-date-picker.css.ts

@@ -0,0 +1,180 @@
+/**
+ * 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';
+
+/**
+ * DatePicker CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .calendar-container {
+    font-family: Colfax-regular;
+    width: 365px;
+    height: auto;
+    text-align: center;
+    background: white;
+  }
+
+  .calendar-container.with-margin {
+  margin-right: 20px;
+}
+
+  .calendar-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+    padding: 22px 20px;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  .divider {
+    width: 100%;
+    height: 1px;
+    background: #c7ced4;
+  }
+
+  .day-names {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    height: 50px;
+    margin-top: 10px;
+  }
+
+  .day-names,
+  .days {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    height: auto;
+    align-items: center;
+  }
+
+  .days {
+    height: auto;
+  }
+
+  .day {
+    flex-basis: calc(100% / 7);
+    box-sizing: border-box;
+    width: 48px;
+    align-items: center;
+    padding: 10px;
+    height: 32px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  }
+
+  .filler {
+    color: grey;
+  }
+
+  .selected-date {
+    color: white;
+    border-radius: 4px;
+    background: #a5d3f3;
+  }
+
+
+
+.calendar-wrapper {
+  background: white;
+  display: flex;
+  justify-content: space-between;
+  width: auto;
+}
+
+.selected-date,
+.range-start,
+.range-end {
+  border-radius: 4px;
+  background: #a5d3f3;
+  color: white;
+}
+
+
+.range-start {
+  background: #a5d3f3;
+  border-radius: 4px 0 0 4px;
+  color: white;
+}
+
+.range-end {
+  background: #a5d3f3;
+  border-radius: 0 4px 4px 0;
+  color: white;
+}
+
+.range-middle {
+  background: #a5d3f3;
+  color: white;
+  border-radius: 0;
+}
+
+.day.selected {
+  background: #a5d3f3;
+  color: white;
+  border-radius: 4px;
+}
+
+.day.in-range {
+  background: #a5d3f3;
+  color: white;
+}
+
+.selected-date {
+  color: white;
+  border-radius: 4px;
+  background: #a5d3f3;
+}
+
+.base {
+  background-color: white;
+  border-radius: 4px;
+  padding-bottom: 20px
+}
+
+.calender-input{
+  padding: 20px;
+  padding-bottom: 0px;
+}
+
+.from {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.manual-input{
+  width:100%;
+}
+
+.manual-input-label{
+  font-size: 12px;
+font-style: normal;
+font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.apply-button {
+  text-align: right;
+  display: block;
+  padding-top: 20px;
+}
+`;
+
+export default [styles];