@aquera/nile-elements 0.0.5-9 → 0.0.6-2

package/package.json

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

package/src/index.ts

@@ -29,4 +29,5 @@ export { NileErrorMessage } from './nile-error-message';
 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 { NileLink } from './nile-link';
+export { NileSwitcher } from './nile-switcher';

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

@@ -146,7 +146,7 @@ export const styles = css`
   .button--standard.button--tertiary {
     background-color: var(--nile-colors-white-base);
     border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
     box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
   }
 
@@ -218,7 +218,7 @@ export const styles = css`
   }
 
   .button--outline.button--secondary:active:not(.button--disabled) {
-    border-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-neutral-700);
     color: var(--nile-colors-white-base);
   }
 

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

@@ -13,168 +13,6 @@ import { css } from 'lit-element';
 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: 730px;
-}
-
-.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];

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

@@ -12,25 +12,9 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, query } from 'lit/decorators.js';
 import { styles } from './nile-date-picker.css';
-import { animateTo, stopAnimations } from '../internal/animate';
-import { classMap } from 'lit/directives/class-map.js';
-import { query } from 'lit/decorators.js';
-import {
-  getAnimation,
-  setDefaultAnimation,
-} from '../utilities/animation-registry';
-import { getTabbableBoundary } from '../internal/tabbable';
-import { waitForEvent } from '../internal/event';
-import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup, PropertyValues } from 'lit';
-import type NileButton from '../nile-button/nile-button';
-import type NileIconButton from '../nile-icon-button/nile-icon-button';
-import type { NileMenu } from '../nile-menu';
-import type { NilePopup } from '../nile-popup';
-import '../nile-popup';
 import { NileDropdown } from '../nile-dropdown';
 
 /**
@@ -49,123 +33,32 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
-  private currentMonth: number = new Date().getMonth();
-  private currentYear: number = new Date().getFullYear();
-
-  @query('nile-dropdown') dropdown: NileDropdown;
-
-  @property({ type: Boolean, reflect: true }) dropDownOpened = false;
-
-  @property({ type: Object }) value : any;
-
-  @property({ type: Object }) rangeValue : any;
-
-  @property({ type: String, attribute: 'value' }) valueAttribute:
-    | string
-    | null = null;
-
-  @property({ type: String, attribute: 'value' }) formattedDate: string | null =
-    null;
-
-  @property({ type: Object }) startDate: Date | null = null;
-  @property({ type: Object }) endDate: Date | null = null;
-  @property({ type: Boolean }) isSelectingStart = true; // flag to indicate what we're selecting
-
   @property({ type: Boolean }) range = false;
 
-  @watch('value')
-  valueChanged() {
-
-    if (this.range && this.value) {
-      this.rangeValue = this.value;
-      this.value = null;
-      return;
-    }
-
-    if (this.value && !isNaN(this.value.getTime())) {
-      const offset = this.value.getTimezoneOffset();
-      const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
-      if (!isNaN(localDate.getTime())) {
-        this.valueAttribute = localDate.toISOString().split('T')[0];
-        this.formattedDate = `${String(localDate.getDate()).padStart(
-          2,
-          '0'
-        )}/${String(localDate.getMonth() + 1).padStart(
-          2,
-          '0'
-        )}/${localDate.getFullYear()}`;
-      }
-    }
-  }
-
-
-  updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
+  @property() value: any;
 
-    if (changedProperties.has('valueAttribute')) {
-      const date = new Date(this.valueAttribute || '');
-      if (!isNaN(date.getTime())) {
-        const offset = date.getTimezoneOffset();
-        this.value = new Date(date.getTime() - offset * 60 * 1000);
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
-  }
-
-  static get observedAttributes() {
-    return ['value', 'range'];
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (name === 'value') {
-      this.valueAttribute = newValue;
-      this.initializeValue();
-    } else if (name === 'range') {
-      this.range = newValue !== null;
-    }
-  }
-
-  initializeValue() {
-    if (this.range) {
-      try {
-        const rangeValue = JSON.parse(this.valueAttribute || '');
-        this.startDate = new Date(rangeValue.startDate);
-        this.endDate = new Date(rangeValue.endDate);
-
-        // Convert to local time
-        this.startDate = new Date(this.startDate.getTime());
-        this.endDate = new Date(this.endDate.getTime());
-
-        this.rangeValue = {
-          startDate: this.startDate,
-          endDate: this.endDate,
-        };
-        this.value = null;
-      } catch (e) {
-        // console.error('Invalid range value');
-      }
-    } else {
-      if (this.valueAttribute) {
-        let date: Date;
-
-        date = new Date(this.valueAttribute);
+  @query('nile-dropdown') dropdown: NileDropdown;
 
-        date = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
 
-        if (!isNaN(date.getTime())) {
-          this.value = date;
-          this.currentMonth = this.value.getMonth();
-          this.currentYear = this.value.getFullYear();
-          this.rangeValue = null;
-        }
-      }
-    }
-    this.requestUpdate();
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  render(): TemplateResult {
+    return html`
+      <nile-dropdown .hoist="${true}">
+        <slot
+        slot="trigger"
+        part="trigger"
+        name="trigger"
+      ></slot>
+      <nile-calendar value="${this.value}" .range="${this.range}" @nile-changed="${this.handleChanged}"></nile-calendar>
+      </nile-dropdown>
+    `;
   }
 
-  handleChanged(event:any) {
-    this.emit('nile-changed', { value: event.detail.value });
+  handleChanged(event: any) {
+    this.emit('nile-changed', event.detail);
     if (this.dropdown) {
       this.dropdown.hide();
     }
@@ -173,16 +66,6 @@ export class NileDatePicker extends NileElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.initializeValue();
-
-    if (this.valueAttribute) {
-      const date = new Date(this.valueAttribute);
-      if (!isNaN(date.getTime())) {
-        this.value = date;
-        this.currentMonth = this.value.getMonth();
-        this.currentYear = this.value.getFullYear();
-      }
-    }
     this.emit('nile-init');
   }
 
@@ -190,29 +73,6 @@ export class NileDatePicker extends NileElement {
     super.disconnectedCallback();
     this.emit('nile-destroy');
   }
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  render(): TemplateResult {
-
-    return html`
-      <nile-dropdown .hoist="${true}">
-        <slot
-        slot="trigger"
-        part="trigger"
-        name="trigger"
-      ></slot>
-
-<nile-calendar .value="${this.range}" .range="${this.range}" @nile-changed="${this.handleChanged}"> </nile-calendar>
-      </nile-dropdown>
-    `;
-  }
 }
 
 export default NileDatePicker;

package/src/nile-switcher/index.ts

@@ -0,0 +1 @@
+export { NileSwitcher } from './nile-switcher';

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

@@ -0,0 +1,37 @@
+/**
+ * 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';
+
+/**
+ * FieldGenerator CSS
+ */
+export const styles = css`
+  :host {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .pointer-cursor {
+    cursor: pointer;
+  }
+  .input-container {
+    display: flex;
+  }
+
+  .input-container > :first-child {
+    width: 100%;
+    padding-right: 12px;
+  }
+  .flex-start {
+    align-items: flex-start;
+    padding-top: 10px;
+  }
+`;
+
+export default [styles];

package/src/nile-switcher/nile-switcher.ts

@@ -0,0 +1,185 @@
+/**
+ * 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 { html, property, TemplateResult } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-switcher.css';
+import NileElement from '../internal/nile-element';
+import { CSSResultGroup } from 'lit';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * @summary Allows you to switch between nile elements
+
+ * @dependency nile-icon
+ * @dependency nile-input
+ * @dependency nile-checkbox
+ * @dependency nile-dropdown
+ * @dependency nile-textarea
+ *
+ 
+ * @event nile-change - Emitted when the control's value changes.
+ */
+
+export interface switchconfig {
+  toggleSwitch: boolean;
+  defaultInput: switchInputType;
+  switchInput: switchInputType;
+}
+
+export interface switchInputType {
+  inputType: 'dropdown' | 'text' | 'checkbox' | 'text-area';
+  value?: String | boolean;
+  label?: String;
+  placeholder?: string;
+  options?: Array<any>;
+  multiple?: boolean;
+}
+
+@customElement('nile-switcher')
+export class NileSwitcher extends NileElement {
+  /**
+   * The styles for nile switcher
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  static styles: CSSResultGroup = styles;
+  @property() nileSwitchConfig: switchconfig;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.emit('nile-init');
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.emit('nile-destroy');
+  }
+
+  renderNileText(defaultInput: switchInputType) {
+    const { value, label, placeholder } = defaultInput;
+    return html`<nile-input
+      .value=${value}
+      .label=${label}
+      .placeholder=${placeholder}
+      @nile-input=${this.handleChange}
+    ></nile-input>`;
+  }
+
+  renderNileTextArea(switchInput: switchInputType) {
+    const { value } = switchInput;
+    return html`<nile-textarea
+      .value=${value}
+      @nile-input=${this.handleChange}
+    ></nile-textarea>`;
+  }
+
+  renderNileCheckBox(defaultInput: switchInputType) {
+    const { value, label } = defaultInput;
+
+    return html`<nile-checkbox
+      .checked=${value}
+      .label=${label}
+      @valueChange="${this.handleChangeCheckbox}"
+    ></nile-checkbox>`;
+  }
+
+  handleChange(event: CustomEvent) {
+    this.emit('nile-change', { value: event.detail.value });
+  }
+
+  handleChangeCheckbox(event: CustomEvent) {
+    this.emit('nile-change', { value: event.detail.checked });
+  }
+
+  renderDropdown(defaultInput: switchInputType) {
+    const { options, multiple, placeholder } = defaultInput;
+    return html`<nile-select
+      .placeholder=${placeholder}
+      .multiple="${multiple}"
+      @nile-change="${this.handleChange}"
+    >
+      ${options &&
+      options.map((option: any) => {
+        return html`<nile-option .value="${option}">${option} </nile-option>`;
+      })}
+    </nile-select>`;
+  }
+
+  renderIcon() {
+    const icon = !this.nileSwitchConfig.toggleSwitch
+      ? 'header-functions'
+      : 'stringinput';
+    return html`<nile-icon
+      size="14"
+      class=${classMap({
+        'pointer-cursor': true,
+        'flex-start': icon === 'stringinput',
+      })}
+      .name=${icon}
+      color="#005EA6"
+      @click=${this.toggleField}
+    ></nile-icon>`;
+  }
+
+  toggleField() {
+    this.nileSwitchConfig = {
+      ...this.nileSwitchConfig,
+      toggleSwitch: !this.nileSwitchConfig.toggleSwitch,
+    };
+  }
+
+  singleFieldSwitcher(
+    defaultInput: switchInputType,
+    switchInput: switchInputType,
+    toggleField: boolean
+  ) {
+    const defaultInputType = defaultInput.inputType;
+    const switchInputType = switchInput.inputType;
+    return html`
+      ${!toggleField
+        ? choose(
+            defaultInputType,
+            [
+              ['text', () => this.renderNileText(defaultInput)],
+              ['checkbox', () => this.renderNileCheckBox(defaultInput)],
+              [
+                'dropdown',
+                () => this.renderDropdown(this.nileSwitchConfig.defaultInput),
+              ],
+            ],
+            () => this.renderNileText(defaultInput)
+          )
+        : choose(
+            switchInputType,
+            [['text-area', () => this.renderNileTextArea(switchInput)]],
+
+            () => this.renderNileTextArea(switchInput)
+          )}
+      ${this.renderIcon()}
+    `;
+  }
+  public render(): TemplateResult {
+    const {
+      toggleSwitch: toggleField,
+      defaultInput,
+      switchInput,
+    } = this.nileSwitchConfig;
+
+    return html`<div class="input-container">
+      ${this.singleFieldSwitcher(defaultInput, switchInput, toggleField)}
+    </div>`;
+  }
+}
+
+export default NileSwitcher;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-switcher': NileSwitcher;
+  }
+}